W3.CSS- kleurenthema's
Kleurenthema's
Met W3.CSS is het eenvoudig om uw toepassingen aan te passen met kleurthema's.
Films 2014
-
Bevroren
De reacties op de animaties waren belachelijk
-
De fout in onze sterren
Ontroerend, aangrijpend en echt goed gemaakt
-
De Wrekers
Een enorm succes voor Marvel en Disney
Films 2014
-
Bevroren
De reacties op de animaties waren belachelijk
-
De fout in onze sterren
Ontroerend, aangrijpend en echt goed gemaakt
-
De Wrekers
Een enorm succes voor Marvel en Disney
Het enige wat je hoeft te doen is een link naar een vooraf gedefinieerd (of zelfgemaakt) thema toe te voegen:
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 thema's
Dit zijn de vooraf gedefinieerde thema's in W3.CSS:
| w3-thema-rood | |
| w3-thema-roze | |
| w3-thema-paars | |
| w3-thema-diep-paars | |
| w3-thema-indigo | |
| w3-thema-blauw | |
| w3-thema-lichtblauw | |
| w3-thema-cyaan | |
| w3-thema-blauwgroen | |
| w3-thema-groen | |
| w3-thema-lichtgroen | |
| w3-thema-limoen | |
| w3-thema-kaki | |
| w3-thema-geel | |
| w3-thema-oranje | |
| w3-thema-oranje | |
| w3-thema-diep-oranje | |
| w3-thema-blauw-grijs | |
| w3-thema-bruin | |
| w3-thema-grijs | |
| w3-thema-donkergrijs | |
| w3-thema-zwart | |
| w3-thema-w3scholen |
Verlopen toevoegen
Een lezer stuurde ons deze suggestie: je zou kunnen overwegen om voor elk thema een verloop toe te voegen.
Ik heb de kleuren l2 en l1 uit het blauwe thema gebruikt om dit verloop te maken:
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%)}
Downloadbare kleurenthema's
Hier zijn enkele downloadbare kleurthema's die zijn geïnspireerd op Google's Material Design:
| Stijlblad | Beschrijving |
|---|---|
| w3-thema-amber.css | Kleurthema Amber |
| w3-thema-zwart.css | Kleurthema Zwart |
| w3-thema-blauw.css | Kleurthema Blauw |
| w3-thema-blauw-grijs.css | Kleurthema Blauw Grijs |
| w3-thema-bruin.css | Kleurthema Bruin |
| w3-thema-cyaan.css | Kleurthema Cyaan |
| w3-thema-donker-grijs.css | Kleurthema Donkergrijs |
| w3-thema-deep-orange.css | Kleurthema Diep oranje |
| w3-thema-diep-paars.css | Kleurthema Deep Purple |
| w3-thema-groen.css | Kleurthema Groen |
| w3-thema-grijs.css | Kleurthema Grijs |
| w3-thema-indigo.css | Kleurthema Indigo |
| w3-thema-kaki.css | Kleurthema Khaki |
| w3-thema-lichtblauw.css | Kleurthema Lichtblauw |
| w3-thema-lichtgroen.css | Kleurthema Lichtgroen |
| w3-thema-lime.css | Kleurthema Limoen |
| w3-thema-oranje.css | Kleurthema Oranje |
| w3-thema-roze.css | Kleurthema Roze |
| w3-thema-paars.css | Kleurthema Paars |
| w3-thema-red.css | Kleurthema Rood |
| w3-thema-teal.css | Kleurthema Teal |
| w3-thema-geel.css | Kleurthema Geel |