Barevná témata W3.CSS
Barevné motivy
S W3.CSS je snadné přizpůsobit aplikace pomocí barevných motivů.
Filmy 2014
-
Zamrzlý
Odezva na animace byla směšná
-
Hvězdy nám nepřály
Dojemné, uchopitelné a opravdu dobře vyrobené
-
The Avengers
Obrovský úspěch pro Marvel a Disney
«»
Filmy 2014
-
Zamrzlý
Odezva na animace byla směšná
-
Hvězdy nám nepřály
Dojemné, uchopitelné a opravdu dobře vyrobené
-
The Avengers
Obrovský úspěch pro Marvel a Disney
«»
Jediné, co musíte udělat, je přidat odkaz na předdefinované (nebo domácí) téma:
Příklad
<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">
Předdefinovaná témata
Toto jsou předdefinovaná témata ve W3.CSS:
| w3-theme-red | |
| w3-theme-pink | |
| w3-theme-purple | |
| w3-theme-deep-purple | |
| w3-theme-indigo | |
| w3-theme-blue | |
| w3-theme-light-blue | |
| w3-theme-cyan | |
| w3-theme-teal | |
| w3-theme-green | |
| w3-theme-light-green | |
| w3-theme-lime | |
| w3-theme-khaki | |
| w3-theme-yellow | |
| w3-theme-amber | |
| w3-theme-orange | |
| w3-theme-deep-orange | |
| w3-theme-blue-grey | |
| w3-theme-hnědá | |
| w3-theme-grey | |
| w3-theme-dark-grey | |
| w3-theme-black | |
| w3-theme-w3schools |
Přidávání přechodů
Jeden čtenář nám poslal tento návrh: Možná byste měli zvážit přidání přechodu pro každé téma.
K vytvoření tohoto přechodu jsem použil barvy l2 a l1 z modrého motivu:
Příklad
.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%)}
Barevná témata ke stažení
Zde je několik barevných motivů ke stažení inspirovaných Material Designem společnosti Google:
| Předloha stylů | Popis |
|---|---|
| w3-theme-amber.css | Barva Téma Jantar |
| w3-theme-black.css | Barva Téma Černá |
| w3-theme-blue.css | Barva Téma Modrá |
| w3-theme-blue-grey.css | Barva Téma Modrá Šedá |
| w3-theme-brown.css | Barva Téma Hnědá |
| w3-theme-cyan.css | Barevný motiv azurová |
| w3-theme-dark-grey.css | Barva Téma Tmavě šedá |
| w3-theme-deep-orange.css | Barva Téma Sytě oranžová |
| w3-theme-deep-purple.css | Barva Téma Deep Purple |
| w3-theme-green.css | Barva Téma Zelená |
| w3-theme-grey.css | Barva Téma Šedá |
| w3-theme-indigo.css | Barevný motiv Indigo |
| w3-theme-khaki.css | Barevné téma Khaki |
| w3-theme-light-blue.css | Barva Téma Světle Modrá |
| w3-theme-light-green.css | Barva Téma Světle Zelená |
| w3-theme-lime.css | Barva Téma Limetka |
| w3-theme-orange.css | Barva Téma Oranžová |
| w3-theme-pink.css | Barva Téma Růžová |
| w3-theme-purple.css | Barva Téma Fialová |
| w3-theme-red.css | Barva Téma Červená |
| w3-theme-teal.css | Barva Téma Teal |
| w3-theme-yellow.css | Barva Téma Žlutá |