Temi colore W3.CSS
Temi di colore
Con W3.CSS, è facile personalizzare le tue applicazioni con temi di colore.
Film 2014
-
Congelato
La risposta alle animazioni è stata ridicola
-
La colpa delle nostre stelle
Toccante, avvincente e veramente ben fatto
-
I Vendicatori
Un grande successo per Marvel e Disney
«»
Film 2014
-
Congelato
La risposta alle animazioni è stata ridicola
-
La colpa delle nostre stelle
Toccante, avvincente e veramente ben fatto
-
I Vendicatori
Un grande successo per Marvel e Disney
«»
Tutto quello che devi fare è aggiungere un collegamento a un tema predefinito (o fatto in casa):
Esempio
<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">
Temi predefiniti
Questi sono i temi predefiniti in W3.CSS:
| w3-tema-rosso | |
| w3-tema-rosa | |
| w3-tema-viola | |
| w3-tema-viola-profondo | |
| w3-tema-indaco | |
| w3-tema-blu | |
| w3-tema-azzurro | |
| w3-tema-ciano | |
| w3-tema-verde acqua | |
| w3-tema-verde | |
| w3-tema-verde chiaro | |
| w3-tema-lime | |
| w3-tema-kaki | |
| w3-tema-giallo | |
| w3-tema-ambra | |
| w3-tema-arancione | |
| w3-tema-arancione intenso | |
| w3-tema-blu-grigio | |
| w3-tema-marrone | |
| w3-tema-grigio | |
| w3-tema-grigio-scuro | |
| w3-tema-nero | |
| w3-tema-w3scuole |
Aggiunta di gradienti
Un lettore ci ha inviato questo suggerimento: potresti prendere in considerazione l'aggiunta di una sfumatura per ogni tema.
Ho usato i colori l2 e l1 del tema blu per creare questo gradiente:
Esempio
.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%)}
Temi colore scaricabili
Ecco alcuni temi colore scaricabili ispirati al Material Design di Google:
| Foglio di stile | Descrizione |
|---|---|
| w3-tema-ambra.css | Colore Tema Ambra |
| w3-tema-nero.css | Colore Tema Nero |
| w3-tema-blu.css | Colore Tema Blu |
| w3-tema-blu-grigio.css | Colore Tema Blu Grigio |
| w3-tema-marrone.css | Colore Tema Marrone |
| w3-tema-ciano.css | Colore tema Ciano |
| w3-theme-dark-grey.css | Colore Tema Grigio Scuro |
| w3-theme-deep-orange.css | Tema colore Arancio intenso |
| w3-theme-deep-viola.css | Tema colore viola intenso |
| w3-tema-verde.css | Colore Tema Verde |
| w3-theme-grey.css | Colore tema grigio |
| w3-theme-indigo.css | Colore Tema Indaco |
| w3-theme-khaki.css | Colore tema cachi |
| w3-theme-light-blue.css | Colore Tema Azzurro |
| w3-tema-verde-chiaro.css | Colore Tema Verde Chiaro |
| w3-theme-lime.css | Colore Tema Lime |
| w3-tema-arancione.css | Colore Tema Arancione |
| w3-tema-rosa.css | Colore Tema Rosa |
| w3-tema-viola.css | Colore Tema Viola |
| w3-tema-rosso.css | Colore Tema Rosso |
| w3-theme-teal.css | Colore verde acqua a tema |
| w3-tema-giallo.css | Colore Tema Giallo |