Créé Thème
Thème In Use:
☰ Films
Gelé
La réponse aux animations était ridicule.
Guerres des étoiles
Les gens étaient sortis pour le nouveau film Star Wars.
Les Vengeurs
Un énorme succès pour Marvel et Disney.
CSS Generated:
Cinque Terre
Les Cinque Terre (cinq terres) est une partie de la Riviera italienne. Le littoral de cinq villages: Monterosso, Vernazza, Corniglia, Manarola et Riomaggiore est un site du patrimoine mondial de l'UNESCO.
Monterosso
Monterosso al Mare est situé au centre d'un petit golfe naturel, protégé par un petit récif artificiel, dans la Riviera de La Spezia. Il est le village le plus septentrional des Cinque Terre.
Vernazza
Vernazza est un autre des cinq villes de la région des Cinque Terre. Vernazza est la quatrième ville en direction du nord. Il n'a pas de circulation automobile, et est l'un des vrais "villages de pêche" sur la Riviera italienne.
Thèmes de couleur
Avec W3.CSS, il est facile de personnaliser vos applications avec vos propres thèmes de couleurs.
Exemple
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href=" /lib/w3-theme-indigo.css ">Thèmes prédéfinis
Dans les applications HTML, vous pouvez limiter l'utilisation de couleurs en choisissant des teintes différentes de couleurs prédéfinies:
| w3-rouge | Essayez - le |
| w3-rose | Essayez - le |
| w3-violet | Essayez - le |
| w3-deep-violet | Essayez - le |
| w3-indigo | Essayez - le |
| w3-bleu | Essayez - le |
| w3-bleu clair | Essayez - le |
| w3 cyan | Essayez - le |
| w3-sarcelle | Essayez - le |
| w3-vert | Essayez - le |
| w3-vert clair | Essayez - le |
| w3 chaux | Essayez - le |
| w3-khaki | Essayez - le |
| w3 jaune | Essayez - le |
| w3-ambre | Essayez - le |
| w3-orangé | Essayez - le |
| w3-deep orange | Essayez - le |
| w3-bleu-gris | Essayez - le |
| w3 brun | Essayez - le |
| w3 gris | Essayez - le |
| w3-gris foncé | Essayez - le |
| w3-noir | Essayez - le |
| w3 w3ii | Essayez - le |
Films 2014
Gelé
La réponse aux animations était ridicule
La faille Nos étoiles
Toucher, préhension et vraiment bien fait
Les Vengeurs
Un énorme succès pour Marvel et Disney
Films 2014
Gelé
La réponse aux animations était ridicule
La faille Nos étoiles
Toucher, préhension et vraiment bien fait
Les Vengeurs
Un énorme succès pour Marvel et Disney
Thèmes privés
Avec W3.CSS, il est facile de personnaliser une application avec un thème de couleur privée.
Vous pouvez créer un lien vers un thème privé dans une balise <link>, ou vous pouvez mettre le thème privé dans une balise <style>:
Exemple
<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5
!important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9
!important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da
!important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb
!important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0
!important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab
!important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f
!important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593
!important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-action {
color:#fff !important;background-color:#311b92
!important}
.w3-text-theme {
color:#1a237e !important}
</style>Ajout 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 l1 et l2 couleurs du thème bleu pour créer ce gradient:
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 couleur
Voici quelques thèmes de couleurs téléchargeables inspirés par Design Matériau de Google:
| style Sheet | La description |
|---|---|
| w3-theme-amber.css | Thème de couleur ambre |
| w3-theme-black.css | Couleur Thème Noir |
| w3-theme-blue.css | Couleur Thème Bleu |
| w3-theme-bleu-grey.css | Couleur Thème Bleu Gris |
| w3-theme-brown.css | Couleur Thème Brown |
| w3-theme-cyan.css | Thème de couleur Cyan |
| w3-theme-dark-grey.css | Couleur Thème Gris foncé |
| w3-theme-deep-orange.css | Couleur Thème orange foncé |
| w3-theme-deep-purple.css | Couleur Thème Deep Purple |
| w3-theme-green.css | Couleur Thème vert |
| w3-theme-grey.css | Couleur Thème gris |
| w3-theme-indigo.css | Thème de couleur Indigo |
| w3-theme-khaki.css | Couleur Thème Kaki |
| w3-theme-lumière blue.css | Couleur Thème Bleu clair |
| w3-theme-lumière green.css | Couleur Thème Vert clair |
| w3-theme-lime.css | Couleur Thème Lime |
| w3-theme-orange.css | Couleur Thème orange |
| w3-theme-pink.css | Couleur Thème Rose |
| w3-theme-purple.css | Couleur Thème Violet |
| w3-theme-red.css | Thème Couleur Rouge |
| w3-theme-teal.css | Couleur Thème Teal |
| w3-theme-yellow.css | Couleur Thème Jaune |