W3.CSS Kleurtemas
Kleur temas
Met W3.CSS is dit maklik om jou toepassings met kleurtemas aan te pas.
Flieks 2014
-
Gevries
Die reaksie op die animasies was belaglik
-
Die fout in ons sterre
Aangrypend, aangrypend en werklik goed gemaak
-
Die Avengers
'n Groot sukses vir Marvel en Disney
«»
Flieks 2014
-
Gevries
Die reaksie op die animasies was belaglik
-
Die fout in ons sterre
Aangrypend, aangrypend en werklik goed gemaak
-
Die Avengers
'n Groot sukses vir Marvel en Disney
«»
Al wat jy hoef te doen is om 'n skakel by 'n voorafbepaalde (of tuisgemaakte) tema by te voeg:
Voorbeeld
<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">
Vooraf gedefinieerde temas
Dit is die vooraf gedefinieerde temas in W3.CSS:
| w3-tema-rooi | |
| w3-tema-pienk | |
| w3-tema-pers | |
| w3-tema-diep-pers | |
| w3-tema-indigo | |
| w3-tema-blou | |
| w3-tema-ligblou | |
| w3-tema-sian | |
| w3-tema-teal | |
| w3-tema-groen | |
| w3-tema-liggroen | |
| w3-tema-lemmetjie | |
| w3-tema-kakie | |
| w3-tema-geel | |
| w3-tema-amber | |
| w3-tema-oranje | |
| w3-tema-diep-oranje | |
| w3-tema-blou-grys | |
| w3-tema-bruin | |
| w3-tema-grys | |
| w3-tema-donkergrys | |
| w3-tema-swart | |
| w3-tema-w3skole |
Voeg gradiënte by
Een leser het vir ons hierdie voorstel gestuur: Jy kan dalk oorweeg om 'n gradiënt vir elke tema by te voeg.
Ek het die l2 en l1 kleure van die blou tema gebruik om hierdie gradiënt te skep:
Voorbeeld
.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%)}
Aflaaibare kleurtemas
Hier is 'n paar aflaaibare kleurtemas geïnspireer deur Google se Materiaalontwerp:
| Stylblad | Beskrywing |
|---|---|
| w3-tema-amber.css | Kleur Tema Amber |
| w3-tema-swart.css | Kleur Tema Swart |
| w3-tema-blou.css | Kleur Tema Blou |
| w3-tema-blou-grys.css | Kleur Tema Blou Grys |
| w3-tema-bruin.css | Kleur Tema Bruin |
| w3-tema-cyan.css | Kleur Tema Siaan |
| w3-tema-donkergrys.css | Kleurtema Donkergrys |
| w3-tema-diep-oranje.css | Kleur Tema diep oranje |
| w3-tema-diep-pers.css | Kleur Tema Diep Pers |
| w3-tema-groen.css | Kleur Tema Groen |
| w3-tema-grys.css | Kleur Tema Grys |
| w3-tema-indigo.css | Kleur Tema Indigo |
| w3-tema-khaki.css | Kleur Tema Kaki |
| w3-tema-ligblou.css | Kleur Tema Ligblou |
| w3-tema-liggroen.css | Kleur Tema Liggroen |
| w3-tema-lime.css | Kleur Tema Limoen |
| w3-tema-oranje.css | Kleur Tema Oranje |
| w3-tema-pienk.css | Kleur Tema Pienk |
| w3-tema-pers.css | Kleur Tema Pers |
| w3-tema-rooi.css | Kleur Tema Rooi |
| w3-tema-teal.css | Kleur Tema Teal |
| w3-tema-geel.css | Kleur Tema Geel |