Utworzono Theme
Temat W użyciu:
☰ Filmy
Mrożony
Odpowiedzią na animacji było śmieszne.
Gwiezdne Wojny
Ludzie wyszli na nowego filmu Star Wars.
Mściciele
Ogromny sukces Marvel i Disney.
Wygenerowane CSS:
Cinque Terre
Cinque Terre (Pięć Ziem) jest częścią włoskiej Riwierze. Linia brzegowa z pięciu wiosek: Monterosso, Vernazza, Corniglia, Manarola i Riomaggiore, jest wpisana na Listę Światowego Dziedzictwa UNESCO.
Monterosso
Monterosso al Mare znajduje się w centrum małej naturalnej zatoce, chronionej przez małą sztucznej rafy, na Riwierze La Spezia. Jest to najbardziej na północ wieś Cinque Terre.
Vernazza
Vernazza to kolejny z pięciu miast w regionie Cinque Terre. Vernazza jest czwartym miastem Kierując się na północ. Nie ma ruchu samochodowego, a to jeden z najprawdziwszym "wiosek rybackich" na Riwierze Włoskiej.
Tematy kolorystyczne
Z W3.CSS, łatwo jest dostosować swoje aplikacje z własnych tematów kolor.
Przykład
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href=" /lib/w3-theme-indigo.css ">predefiniowane motywy
W aplikacji HTML, można ograniczyć wykorzystanie kolorów, wybierając różne odcienie z predefiniowanych kolorów:
| w3-czerwone | Spróbuj |
| w3-różowe | Spróbuj |
| w3-fioletowy | Spróbuj |
| w3-deep-fioletowy | Spróbuj |
| w3-indygo | Spróbuj |
| w3-blue | Spróbuj |
| w3-jasnoniebieski | Spróbuj |
| w3-cyan | Spróbuj |
| w3-morski | Spróbuj |
| w3-zielone | Spróbuj |
| w3-jasnozielony | Spróbuj |
| w3-wapienny | Spróbuj |
| w3-khaki | Spróbuj |
| w3-żółta | Spróbuj |
| w3-bursztynowa | Spróbuj |
| w3-pomarańczowe | Spróbuj |
| w3-deep-pomarańczowe | Spróbuj |
| w3-niebiesko-szary | Spróbuj |
| w3-brązowa | Spróbuj |
| w3-szara | Spróbuj |
| w3-ciemnoszary | Spróbuj |
| w3-czarna | Spróbuj |
| w3-w3ii | Spróbuj |
Filmy 2014
Mrożony
Odpowiedzią na animacji było śmieszne
Usterki w naszych gwiazd
Dotknięcie, chwytania i naprawdę dobrze zrobiony
Mściciele
Ogromny sukces Marvel i Disney
Filmy 2014
Mrożony
Odpowiedzią na animacji było śmieszne
Usterki w naszych gwiazd
Dotknięcie, chwytania i naprawdę dobrze zrobiony
Mściciele
Ogromny sukces Marvel i Disney
prywatne tematy
Z W3.CSS, łatwo jest dostosować aplikacje z prywatnym kolorystyce.
Można połączyć do prywatnej tematu w tag <link>, można też umieścić w prywatnej motyw <style> tagu:
Przykład
<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5
!important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9
!important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da
!important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb
!important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0
!important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab
!important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f
!important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593
!important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-action {
color:#fff !important;background-color:#311b92
!important}
.w3-text-theme {
color:#1a237e !important}
</style>Dodawanie Gradienty
Jeden z czytelników przysłał nam tę sugestię: może warto rozważyć dodanie gradientu dla każdego tematu.
Kiedyś L2 i L1 kolory od niebieskiego do stworzenia tego tematu gradientu:
Przykład
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
Tematy kolorystyczne
Oto kilka pobrania kolorowe motywy inspirowane Materiał projekt Google:
| Arkusz stylów | Opis |
|---|---|
| w3-theme-amber.css | Kolor Motyw Amber |
| w3-theme-black.css | Kolor Czarny Theme |
| w3-theme-blue.css | Kolor Niebieski Theme |
| w3-theme-niebiesko-grey.css | Kolor Niebieski Szary Theme |
| w3-theme-brown.css | Kolor Brown Theme |
| w3-theme-cyan.css | Kolor Motyw Cyan |
| w3-theme-dark-grey.css | Kolor Theme Dark Grey |
| w3-theme-deep-orange.css | Kolor pomarańczowy Theme Głębokie |
| w3-theme-deep-purple.css | Kolor Motyw Deep Purple |
| w3-theme-green.css | Kolor zielony Theme |
| w3-theme-grey.css | Kolor Szary Theme |
| w3-theme-indigo.css | Kolor Motyw Indigo |
| w3-theme-khaki.css | Kolor Motyw Khaki |
| w3-theme-light-blue.css | Kolor Motyw Light Blue |
| w3-theme-light-green.css | Kolor Motyw Jasnozielony |
| w3-theme-lime.css | Kolor Motyw Lime |
| w3-theme-orange.css | Kolor pomarańczowy Theme |
| w3-theme-pink.css | Kolor Różowy Theme |
| w3-theme-purple.css | Kolor Purpurowy Theme |
| w3-theme-red.css | Kolor czerwony Motyw |
| w3-theme-teal.css | Kolor Motyw Teal |
| w3-theme-yellow.css | Kolor żółty Theme |