W3.CSS Motywy kolorystyczne
Motywy kolorystyczne
Dzięki W3.CSS łatwo jest dostosować swoje aplikacje za pomocą motywów kolorystycznych.
Filmy 2014
-
Mrożony
Odpowiedź na animacje była śmieszna
-
Błąd w naszych gwiazdach
Wzruszające, chwytające i naprawdę dobrze wykonane
-
Mściciele
Ogromny sukces Marvela i Disneya
«»
Filmy 2014
-
Mrożony
Odpowiedź na animacje była śmieszna
-
Błąd w naszych gwiazdach
Wzruszające, chwytające i naprawdę dobrze wykonane
-
Mściciele
Ogromny sukces Marvela i Disneya
«»
Wszystko, co musisz zrobić, to dodać link do predefiniowanego (lub domowego) motywu:
Przykład
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-theme-indigo.css">
Predefiniowane motywy
Oto predefiniowane motywy w W3.CSS:
| w3-motyw-czerwony | |
| w3-motyw-różowy | |
| w3-motyw-fioletowy | |
| w3-motyw-głęboko-fioletowy | |
| w3-theme-indygo | |
| w3-motyw-niebieski | |
| w3-motyw-jasnoniebieski | |
| w3-theme-cyjan | |
| w3-motyw-turkusowy | |
| w3-motyw-zielony | |
| w3-motyw-jasnozielony | |
| w3-motyw-limonkowy | |
| w3-theme-khaki | |
| w3-motyw-żółty | |
| w3-motyw-bursztynowy | |
| w3-motyw-pomarańczowy | |
| w3-motyw-ciemnopomarańczowy | |
| w3-motyw-niebiesko-szary | |
| w3-motyw-brązowy | |
| w3-motyw-szary | |
| w3-theme-ciemno-szary | |
| w3-motyw-czarny | |
| w3-theme-w3schools |
Dodawanie gradientów
Jeden z czytelników przesłał nam następującą sugestię: Możesz rozważyć dodanie gradientu dla każdego motywu.
Użyłem kolorów l2 i l1 z niebieskiego motywu, aby stworzyć ten gradient:
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%)}
Motywy kolorystyczne do pobrania
Oto kilka motywów kolorystycznych do pobrania inspirowanych Material Design firmy Google:
| Arkusz stylów | Opis |
|---|---|
| w3-theme-amber.css | Motyw kolorystyczny Bursztynowy |
| w3-theme-black.css | Motyw kolorystyczny Czarny |
| w3-theme-blue.css | Motyw kolorystyczny Niebieski |
| w3-theme-blue-grey.css | Motyw kolorystyczny Niebieski Szary |
| w3-theme-brown.css | Motyw kolorystyczny Brązowy |
| w3-theme-cyan.css | Motyw kolorystyczny Cyjan |
| w3-theme-dark-grey.css | Motyw kolorystyczny Ciemnoszary |
| w3-theme-deep-orange.css | Motyw kolorystyczny Głęboka pomarańcza |
| w3-theme-deep-purple.css | Motyw kolorystyczny Głęboki fiolet |
| w3-theme-green.css | Motyw kolorystyczny Zielony |
| w3-theme-grey.css | Motyw kolorystyczny Szary |
| w3-theme-indygo.css | Motyw kolorystyczny Indygo |
| w3-theme-khaki.css | Motyw kolorystyczny Khaki |
| w3-theme-jasnoniebieski.css | Motyw kolorystyczny Jasnoniebieski |
| w3-theme-jasnozielony.css | Motyw kolorystyczny Jasnozielony |
| w3-theme-lime.css | Kolorowy motyw limonkowy |
| w3-theme-orange.css | Motyw kolorystyczny Pomarańczowy |
| w3-theme-pink.css | Motyw kolorystyczny Różowy |
| w3-theme-fioletowy.css | Motyw kolorystyczny Fioletowy |
| w3-theme-red.css | Motyw kolorystyczny Czerwony |
| w3-theme-teal.css | Kolorowy motyw turkusowy |
| w3-theme-yellow.css | Motyw kolorystyczny Żółty |