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
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.
W3PRO.CSS privilégie l'usage de thèmes chromatiques pré-paramétrés.
Chaque thème chromatique propose plusieurs nuances de la même teinte.
Les couleurs qui le composent sont appliquables par des classes spécifiques.
Ces classes sont paramétrées dans la feuille de style "w3-theme-teal.css".
Exemples de coloration d'éléments avec les classes du thème utilisé dans cette page
Le fond est la couleur du thème très éclaircie. La classe utilisée est "w3-theme-l5" (l pour “light”)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Le fond de la zone d'entête est la couleur du thème très assombrie. La classe utilisée est "w3-theme-d5" (d pour “dark”)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
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 utilisé.
| Prénom | Nom | Points |
|---|---|---|
| Gilles | Charpentier | 50 |
| Hélène | Dupont | 94 |
| Ghislain | Coulanges | 67 |
Lors du rafraîchissement de la page, la barre de progression reprend sa position initiale.
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.
