Thèmes de couleurs W3.CSS
Thèmes de couleur
Avec W3.CSS, il est facile de personnaliser vos applications avec des thèmes de couleurs.
Films 2014
-
Gelé
La réponse aux animations était ridicule
-
La faute à nos étoiles
Touchant, captivant et vraiment bien fait
-
Les Vengeurs
Un immense succès pour Marvel et Disney
«»
Films 2014
-
Gelé
La réponse aux animations était ridicule
-
La faute à nos étoiles
Touchant, captivant et vraiment bien fait
-
Les Vengeurs
Un immense succès pour Marvel et Disney
«»
Il vous suffit d'ajouter un lien vers un thème prédéfini (ou fait maison) :
Exemple
<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">
Thèmes prédéfinis
Voici les thèmes prédéfinis dans W3.CSS :
| w3-thème-rouge | |
| w3-thème-rose | |
| w3-thème-violet | |
| w3-theme-deep-purple | |
| w3-theme-indigo | |
| w3-thème-bleu | |
| w3-theme-bleu clair | |
| w3-theme-cyan | |
| w3-theme-bleu sarcelle | |
| w3-thème-vert | |
| w3-theme-vert-clair | |
| w3-theme-chaux | |
| w3-thème-kaki | |
| w3-thème-jaune | |
| w3-thème-ambre | |
| w3-thème-orange | |
| w3-theme-deep-orange | |
| w3-theme-bleu-gris | |
| w3-thème-marron | |
| w3-thème-gris | |
| thème-w3-gris-foncé | |
| w3-theme-noir | |
| w3-theme-w3schools |
Ajout de dégradés
Un lecteur nous a envoyé cette suggestion : Vous voudrez peut-être envisager d'ajouter un dégradé pour chaque thème.
J'ai utilisé les couleurs l2 et l1 du thème bleu pour créer ce dégradé :
Exemple
.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%)}
Thèmes de couleurs téléchargeables
Voici quelques thèmes de couleurs téléchargeables inspirés du Material Design de Google :
| Feuille de style | La description |
|---|---|
| w3-theme-amber.css | Thème de couleur Ambre |
| w3-theme-noir.css | Thème de couleur Noir |
| w3-theme-bleu.css | Thème de couleur Bleu |
| w3-theme-bleu-gris.css | Thème de couleur Bleu Gris |
| w3-theme-marron.css | Thème de couleur Marron |
| w3-theme-cyan.css | Thème de couleur Cyan |
| w3-theme-dark-grey.css | Thème de couleur gris foncé |
| w3-theme-deep-orange.css | Thème de couleur orange foncé |
| w3-theme-deep-purple.css | Thème de couleur Violet profond |
| w3-theme-green.css | Thème de couleur Vert |
| w3-theme-grey.css | Thème de couleur Gris |
| w3-theme-indigo.css | Thème de couleur Indigo |
| w3-theme-kaki.css | Thème de couleur Kaki |
| w3-theme-light-blue.css | Thème de couleur Bleu clair |
| w3-theme-light-green.css | Thème de couleur vert clair |
| w3-theme-lime.css | Thème de couleur citron vert |
| w3-theme-orange.css | Thème de couleur Orange |
| w3-theme-rose.css | Thème de couleur Rose |
| w3-theme-violet.css | Thème de couleur Violet |
| w3-theme-rouge.css | Thème de couleur Rouge |
| w3-theme-teal.css | Thème de couleur bleu sarcelle |
| w3-theme-jaune.css | Thème de couleur Jaune |