w3-card
w3-card w3-theme-d4
w3-card-4
Design adaptatif intégré
Grille fluide “mobile first”
Convient à toutes les tailles d'écran
PC, tablette et mobile
Utilise les CSS standards
Facile à apprendre
Pas besoin de jQuery
Pas de bibliothèque JavaScript
Effets papiers découpés
Couleurs et ombrages efficaces
Apparence identique sur tous les navigateurs
Apparence identique sur tous les écrans
La couleur du texte est paramétrée par défaut pour optimiser de sa lisibilité sur chaque couleur.
Une seule classe détermine à la fois la couleur du fond et la couleur du texte.
Il est possible de modifier la couleur du texte (exemples ci-dessous sur fond noir ou blanc).
w3-deep-purple
w3-blue-grey
w3-red
w3-green
w3-khaki
w3-deep-orange
w3-dark-grey
w3-light-green
w3-brown
w3-cyan
w3-grey
w3-orange
w3-purple
w3-blue
w3-amber
w3-indigo
w3-light-gray
w3-yellow
w3-light-blue
w3-aqua
w3-sand
w3-lime
w3-pink
w3-pale-yellow
w3-pale-blue
w3-pale-green
w3-pale-red
w3-black w3-text-light-green
w3-white w3-text-green
w3-black w3-text-amber
w3-white w3-text-brown
On parle aussi de design réactif. Les termes “adaptatif” et “réactif” traduisent le terme anglais “responsive”.
Redimensionnez la fenêtre pour voir comment réagissent les colonnes ci-dessous.
La classe w3-half utilise la moitié (50%) de l'espace disponible à l'écran.
Sur les petits écrans (max 600 pixels) elle est automatiquement affichée en pleine largeur.
La classe w3-third utilise le tiers (33,33%) de l'espace disponible à l'écran.
Sur les petits écrans (max 600 pixels) elle est automatiquement affichée en pleine largeur.
La classe w3-quarter utilise le quart (25%) de l'espace disponible à l'écran.
Sur les petits écrans (max 600 pixels) elle est automatiquement affichée en pleine largeur.
Utilisez des conteneurs pour créer des headers (têtières), des sections et des footers (pieds de page).
Exemples de conteneurs
Ce type de conteneur convient très bien pour la têtière d'un site complet ou d'une simple page.
En passant, notez que vous pouvez ajouter une icône de fermeture à tous les conteneurs si vous souhaitez pouvoir les masquer. Regardez à votre droite, une petite croix permet de masquer cette section ! Une fois masquée, la section sera de nouveau visible après rafraîchissement de la page Web.
En plus des couleurs par défaut (voir plus haut), W3.CSS propose plusieurs bibliothèques et thèmes colorés.
Les couleurs de chaque bibliothèque chromatique s'harmonisent au sein d'une page Web ou d'un même site.
Les couleurs des thèmes chromatiques ont été paramétrées pour s'harmoniser les unes avec les autres en formant un des accords monochromes.
Apprenez à utiliser les bibliothèques et les thèmes chromatiques
sur le site w3schools.com
Exemples de coloration d'éléments de page
Utilisation de plusieurs classes (w3-text-nomCouleur) aussi bien pour les textes que pour les arrières-plans
Nécessite un paramétrage de la couleur élément par élément
Permet de multiplier les couleurs dans une même page. De plus, la couleur par défaut du texte, pour une couleur de fond donnée, est optimisé pour la lisibilité
Tout changement nécessite de nombreuses modifications dans le code
Utilisation d'une classe principale (w3-text-theme) et de 8 classes secondaires (w3-theme-l1, w3-theme-d1, etc.)
Le même paramétrage est utilisé pour tous les éléments, avec les nuances light et dark (4 niveaux disponibles pour la couleur des arrière-plans)
Le changement de couleur nécessite une seule modification dans le code
L'unité chromatique ainsi obtenue peut paraître monotone
w3-card
w3-card w3-theme-d4
w3-card-4
W3.CSS prend en charge l'habillage des tableaux.
Le tableau ci-dessous est habillé selon les paramètres du thème choisi.
| Prénom | Nom | Points |
|---|---|---|
| Gilles | Charpentier | 50 |
| Hélène | Dupont | 94 |
| Ghislain | Coulanges | 67 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paysage d'Europe du Nord :
Trolltunga, Norvège
Londres est la capitale de l'Angleterre.
C'est la ville la plus peuplée du Royaume Uni, formant une métropole de plus de 13 millions d'habitants.
Paris est la capitale de la France.
Paris est un des plus grands centres urbains d'Europe continentale, avec plus de 12 millions d'habitants.
Tokyo est la capitale du Japon.
C'est le cœur de la plus peuplée des grandes métropoles du monde.
