Tutoriel W3.

CSS
❮ MaisonSuivant ❯

Une alternative de qualité à

Bootstrap
[Link] est plus petit, plus rapide et plus facile à utiliser.

CSS W3
[Link] est un framework CSS moderne, réactif et mobile.

[Link] assure l'égalité pour tous les navigateurs : Chrome. Firefox. Edge. IE.
Safari. Opera.

[Link] offre l'égalité pour tous les appareils : ordinateur de bureau,

ordinateur portable, tablette, mobile.

[Link] est uniquement du CSS standard (pas de bibliothèque jQuery ou

JavaScript).

Commencez à apprendre [Link] maintenant »

Exemple
<div class="w3-container w3-teal">
<h1>My Header</h1>
</div>

<img src="img_car.jpg" alt="Car">

<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for
transportation.</p>
</div>

<div class="w3-container w3-teal">

 <p>My Footer</p>
</div>

Essayez-le vous-même »
« Faites-le aussi simple que possible, mais pas plus simple. »
Albert Einstein

[Link] est gratuit

[Link] est gratuit. Aucune licence n'est nécessaire.

Comment faire
Pour utiliser [Link] sur votre site Web, ajoutez simplement un lien vers
« [Link] » à partir de vos pages Web :

Exemple
<link rel="stylesheet" href="[Link]
[Link]">

Essayez-le vous-même »

Ou téléchargez [Link] depuis w3css_downloads et ajoutez un lien vers

[Link] :

Exemple
<link rel="stylesheet" href="[Link]">

PUBLICITÉ

Cours intensif [Link]

Comment créer une page Web agréable à regarder sur tous les appareils
(ordinateur de bureau, ordinateur portable, tablette et téléphone).
Commencer le cours intensif » » »

Modèles de sites Web [Link]

Nous avons créé quelques modèles W3CSS réactifs que vous pouvez utiliser.

Vous êtes libre de les modifier, de les enregistrer, de les partager, de les
utiliser ou de faire ce que vous voulez avec eux :

Modèle de restauration

Modèle de portfolio
Modèle de marketing

Modèle de café
 Modèle de mariage

Modèle de nourriture

Voir tous les modèles »

Introduction à
[Link] (évier de cuisine)
❮ PrécédentSuivant ❯
Couleurs [Link]
Les classes w3-color s'inspirent des couleurs modernes utilisées dans le
marketing, les panneaux de signalisation et les notes autocollantes :

Conteneurs [Link]
La classe w3-container est la plus importante des classes [Link]. Elle
fournit l'égalité comme :

 Marges communes
 Rembourrages communs
 Alignements verticaux courants
 Alignements horizontaux courants
 Polices courantes
 Couleurs communes

La classe w3-container est généralement utilisée avec des éléments de

conteneur HTML, comme :

<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>,

et plus encore.

Ceci est un en-tête

Cet article est gris clair et le texte est marron. Cet article est gris clair et le
texte est marron. Cet article est gris clair et le texte est marron. Cet article
est gris clair et le texte est marron. Cet article est gris clair et le texte est
marron.

Ceci est un pied de page.

Panneaux, notes et citations [Link]

La classe w3-panel peut afficher toutes sortes de notes et de citations :

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone

métropolitaine de plus de 9 millions d'habitants.

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone

métropolitaine de plus de 9 millions d'habitants.

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone

métropolitaine de plus de 9 millions d'habitants.

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone

métropolitaine de plus de 9 millions d'habitants.

« Faites-le aussi simple que possible, mais pas plus simple. »

Albert Einstein

Alertes [Link]
La classe w3-panel peut également être utilisée pour toutes sortes d'alertes :
×

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Avertissement!
Le jaune indique souvent un avertissement qui pourrait nécessiter une
attention particulière.

Succès!
Le vert indique souvent quelque chose de réussi ou de positif.

Info!
Le bleu indique souvent un changement ou une action informative neutre.

Exemple
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need
attention.</p>
</div>

Essayez-le vous-même »

Cartes [Link]
Les classes w3-card conviennent à la fois aux images et aux notes :

Une voiture
Une voiture est un véhicule à moteur à roues, autopropulsé, utilisé pour le
transport. La plupart des définitions du terme précisent que les voitures sont
conçues pour circuler principalement sur les routes, pour accueillir une à huit
personnes et pour avoir généralement quatre roues.

(Wikipedia)

Incroyable

Alpes françaises

Exemple
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>

Essayez-le vous-même »

Tableaux [Link]
Les classes w3-table peuvent gérer tous les types de tables :
 Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Anja Alésage 100

Exemple
<table class="w3-table w3-striped w3-border">

Essayez-le vous-même »

Listes [Link]
La classe w3-ul peut gérer toutes sortes de listes :
 × Mik
e
Web Designer
 × Sout
ien de Jill
 × Jan
e
Comptable
  × Jack
Conseiller

Exemple
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Boutons [Link]
Les classes w3-button et w3-btn fournissent des boutons de toutes tailles et
de tous types.

Bouton Bouton Bouton Bouton Bouton Bouton Désactivé

Bouton Bouton Bouton Bouton Bouton Bouton

Boutons larges :

Bouton
Bouton
UnDeuxTrois

Boutons circulaires ou carrés :

+++

+++

Balises, étiquettes, badges et

panneaux [Link]
Les classes w3-tag et w3-badge sont capables d'afficher toutes sortes
d'étiquettes, de labels, de badges et de panneaux :

2 8 UN B

Nouveau Avertissement Danger Informations

Promenade Falcon Ridge

S
UN
L
E
 NE PAS
RESPIRER
SOUS L'EAU

[Link] réactif
Les classes Responsive Grid offrent une réactivité pour tous les types
d'appareils : PC, ordinateur portable, tablette et mobile.

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

1/1

1/4
 1/4

1/2

1/4

1/2

1/4

50px

repos

1/4

repos

100 px

45px

repos

[Link] prend également en charge une grille fluide mobile-first de 12

colonnes avec des classes petites, moyennes et grandes.

Affichage [Link]
Les classes w3-display vous permettent d'afficher des éléments HTML dans
des positions spécifiques :

En haut à gauche
En haut à droite
En bas à gauche
En bas à droite
Gauche
Droite
Milieu
Haut Milieu
En bas au milieu
En haut à gauche
En haut à droite
En bas à gauche
En bas à droite
Gauche
Droite
Milieu
Haut Milieu
En bas au milieu

Modaux [Link]
La classe w3-modal fournit une boîte de dialogue modale en HTML
pur :

Cliquez pour ouvrir la fenêtre modale

Image modale :
Barres de progression [Link]
En savoir plus sur les barres de progression [Link]

25%

50%

Cliquez sur moi

Listes déroulantes [Link]

Les classes w3-dropdown fournissent des listes déroulantes :

Survolez-moi !
Cliquez sur moi!
Accordéons [Link]
En savoir plus sur [Link] Accordions

Ouvrir la section 1Ouvrir la section 2Ouvrir la section 3

Onglets [Link]
Les onglets sont parfaits pour les applications Web d'une seule page ou pour
les pages Web capables d'afficher différents sujets.

LondresParisTokyo

Londres
Londres est la capitale de l'Angleterre.

C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine

de plus de 9 millions d'habitants.

Galerie d'images à onglets (cliquez sur l'une des images) :

Navigation [Link]
La classe w3-bar peut être utilisée pour créer une barre de navigation :

MaisonLien 1Lien 2Lien 3

Barre de navigation avec saisie :

MaisonLien 1Lien 2Aller

Barre de navigation avec menu déroulant :

MaisonLien 1
Dérouler

Barres personnalisées :

MaisonLien 1Lien 2

MaisonLien 1Lien 2Lien 3

La classe w3-sidebar crée une navigation latérale :

Pagination [Link]
[Link] fournit des moyens simples pour la pagination des pages .

«12345»

❮ PrécédentSuivant ❯

❮ ❯

Diaporamas
[Link] fournit des diaporamas permettant de parcourir des images ou
d'autres contenus :
1/3
Belle nature
❮
❯

Boîte à lumière
Combinez des modaux et des diaporamas pour créer une lightbox (galerie
d'images modales) :
Animations [Link]
Les classes w3-animate offrent un moyen simple de faire glisser et de faire
apparaître des éléments en fondu :

Haut Bas Gauche Droite Fondu en entrée Zoom Rotation

L'animation est amusante !

Images [Link]
Styliser des images dans W3CSS est facile :
Nature

Effets [Link]
Ajoutez des effets spéciaux à n’importe quel élément :

Normale

Opacité
 Niveaux de gris

Sépia

Formulaires de saisie [Link]

Les classes w3-input sont destinées aux formulaires de saisie :
Formulaire de saisie
Nom

E-mail

Sujet

Lait

Sucre

Citron (Désactivé)

Formulaire de saisie
Nom

E-mail

Sujet

Mâle

Femelle

Je ne sais pas (désactivé)

Filtres [Link]
Utilisez les filtres [Link] pour rechercher un élément spécifique dans une
liste, un tableau, une liste déroulante, etc. :

Nom Pays
 Alfreds Futterkiste Allemagne

Le snabbkop de Berglund Suède

Commerce sur l'île ROYAUME-UNI

Königlich Essen Allemagne

Les caves à vin de Bacchus le Rieur Canada

Magasins Alimentaires Réunis Italie

Nord/Sud ROYAUME-UNI

Spécialités parisiennes France

Polices [Link]
Avec [Link], il est extrêmement facile d'ajouter des polices à une page
Web :

Rendre le Web beau !

Créer le Web !
Info-bulles [Link]
La classe w3-tooltip peut afficher toutes sortes d'info-bulles :

Survolez ce texte !

Survolez ce texte !

Thèmes de couleurs
Les thèmes de couleurs peuvent être facilement ajoutés à n’importe quelle
application Web :

Thème Indigo
Films 2014
 Congelé

La réponse aux animations était ridicule

 Nos étoiles contraires

Touchant, captivant et vraiment bien fait

 Les Vengeurs
Un énorme succès pour Marvel et Disney

«»
Thème Sarcelle
Films 2014
 Congelé

La réponse aux animations était ridicule

 Nos étoiles contraires

Touchant, captivant et vraiment bien fait

 Les Vengeurs
Un énorme succès pour Marvel et Disney

«»
Les thèmes de couleurs conviennent parfaitement aux applications mobiles.

❮ PrécédentSuivant ❯

Couleurs [Link]
❮ PrécédentSuivant ❯

Rouge Rose

Violet Violet foncé

Indigo Bleu

Bleu clair Cyan

Aqua Sarcelle

Vert Vert clair

 Citron vert Sable

Kaki Jaune

Ambre Orange

Orange foncé Bleu Gris

Brun Gris clair

Gris Gris foncé

Rouge pâle Jaune pâle

Vert pâle Bleu pâle

Le schéma de couleurs par défaut utilisé dans [Link] est inspiré des
couleurs Material Design (couleurs utilisées dans le marketing, les panneaux
de signalisation et les notes autocollantes).

Colorier les éléments HTML

Les classes w3- color et w3-text- color peuvent être utilisées pour colorer
n'importe quel élément HTML :

Conteneurs :
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Boutons:
Sarcelle Bleu Jaune Orange Rouge Violet

Texte:
Rouge Violet Bleu Vert Orange
Frontières:
Rouge

Vert

Bleu

Jaune

Gris

Noir

Tableaux:
Nom Points

Jill Smith 50

Eve Jackson 94

Adam Johnson 67

Cartes:
Une voiture est un véhicule à moteur à roues, autopropulsé, utilisé pour le
transport. La plupart des définitions du terme précisent que les voitures sont
conçues pour circuler principalement sur les routes, pour accueillir une à huit
personnes et pour avoir généralement quatre roues. (Wikipedia)

PUBLICITÉ
Couleurs d'arrière-plan
Les classes de couleurs w3 définissent la couleur d'arrière-plan de tout
élément HTML :

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »
Les couleurs gris et gris sont interchangeables dans toutes les classes
[Link].
Couleurs du texte
Les classes w3-text- color définissent la couleur du texte de n'importe quel
élément HTML :

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Couleurs de survol
Les classes de couleurs w3-hover- définissent la couleur de survol
d'arrière-plan pour tout élément HTML :

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with
a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Les classes de couleur w3-hover-text- définissent la couleur de survol du

texte pour tout élément HTML :

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with
a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Bibliothèques de couleurs
En plus des couleurs standard [Link], [Link] peut également utiliser des
couleurs provenant de nombreuses bibliothèques de couleurs différentes :

Couleurs des fenêtres :

Citron vert
Vert
Olive
Émeraude
Sarcelle
Acier
Cyan
Bleu
Indigo
Cobalt
Violet
Mauve
 Rose
Magenta
Rouge
Orange
Ambre
Jaune
Brun
Taupe
Terre de sienne
Cramoisi

Cliquez ici pour en savoir plus sur les couleurs Windows

Couleurs de la mode :
Flamme
Verdure
Marina

Jaune primevère
Gris neutre

Épicéa ombragé

Pivoine marine

Porto Tawny

Cliquez ici pour en savoir plus sur les couleurs de la mode

Couleurs des autoroutes :

Rouge
Vert
Bleu
Jaune
Cliquez ici pour en savoir plus sur les bibliothèques de couleurs

Vous en apprendrez beaucoup plus sur les couleurs dans les chapitres
suivants de ce tutoriel.

Conteneurs [Link]
❮ PrécédentSuivant ❯

Ceci est mon en-tête

Ceci est mon article
Cet article est gris clair et le texte est marron. Cet article est gris clair et le
texte est marron. Cet article est gris clair et le texte est marron. Cet article
est gris clair et le texte est marron. Cet article est gris clair et le texte est
marron.

Ceci est mon pied de page

La classe Container
La classe w3-container ajoute un remplissage gauche et droit de 16 px à
n'importe quel élément HTML.

La classe w3-container est la classe parfaite à utiliser pour tous les

éléments de conteneur HTML comme :

<div>, <article>, <section>, <header>, <footer>, <form>, et plus encore.

Les conteneurs offrent l'égalité

Le conteneur w3 offre l'égalité pour tous les éléments du conteneur HTML :

 Marges communes
 Rembourrages communs
  Alignements courants
 Polices courantes
 Couleurs communes

Pour utiliser un conteneur, ajoutez simplement une classe w3-container à

n'importe quel élément :

Exemple
<div class="w3-container">
<p>The w3-container class is an important [Link] class.</p>
</div>

Essayez-le vous-même »

Pour ajouter une couleur, ajoutez simplement une classe de couleur w3 :

Exemple
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

En-têtes et pieds de page

La classe w3-container peut être utilisée pour styliser les en-têtes :

En-tête
Exemple
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>

Essayez-le vous-même »

Exemple
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>

Essayez-le vous-même »
Il n'y a aucune différence dans la façon dont [Link] traite les éléments
<div> et <header>.

La classe w3-container peut être utilisée pour styliser les pieds de page :

Pied de page
Les informations du pied de page se trouvent ici

Exemple
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>

Essayez-le vous-même »

Exemple
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>

Essayez-le vous-même »
De nombreuses pages Web utilisent des éléments <div> au lieu des éléments
<header> et <footer>.

Articles et sections
La classe w3-container peut être utilisée pour styliser les éléments
<article> et <section> :

Exemple
<div class="w3-container">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in
Europe,
with more than 2 million inhabitants.</p>
</article>

<section class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</section>

Essayez-le vous-même »
De nombreuses pages Web utilisent des éléments <div> au lieu des éléments
<article> et <section>.

Exemple de page Web

En-tête

Une voiture est un véhicule à moteur à roues, autopropulsé, utilisé pour le

transport. La plupart des définitions du terme précisent que les voitures sont
conçues principalement pour circuler sur les routes. (Wikipedia)

Pied de page
Exemple d'utilisation d'éléments HTML <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for
transportation. Most definitions of the term specify that cars
are designed to run primarily on roads. (Wikipedia)</p>
</div>

<div class="w3-container w3-red">

<h5>Footer</h5>
</div>

Essayez-le vous-même »

Exemple utilisant des éléments sémantiques

HTML
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>

<img src="img_car.jpg" alt="Car" style="width:100%">

<article class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for
transportation. Most definitions of the term specify that cars
are designed to run primarily on roads. (Wikipedia)</p>
</article>

<footer class="w3-container w3-teal">

<h5>Footer</h5>
</footer>

Essayez-le vous-même »

Rembourrage du conteneur
La classe w3-container a un remplissage gauche et droit par défaut
de 16 px , et aucun remplissage haut ou bas :

Je n'ai pas de rembourrage supérieur ou inférieur

Exemple
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>

Essayez-le vous-même »

Normalement, vous n'aurez pas à modifier le remplissage par défaut d'un

conteneur, car les paragraphes et les titres fournissent des marges qui
simuleront le remplissage.

Je suis un titre
Je suis un paragraphe.

Exemple
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Panneaux [Link]
❮ PrécédentSuivant ❯

Je suis un panel.

Je suis un panel.

Je suis un conteneur.

Je suis un conteneur.

La classe du panneau
La classe w3-panel ajoute une marge supérieure et inférieure de 16 px et un
remplissage gauche et droit de 16 px à tout élément HTML.
Exemple
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>

Essayez-le vous-même »

Panneaux pour notes

La classe w3-panel est parfaite pour afficher des notes.

Les notes sont souvent affichées avec une couleur pâle :

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone

métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-panel w3-pale-green">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Pour en savoir plus sur les notes [Link], veuillez consulter le chapitre Notes
[Link] .

PUBLICITÉ

Panneaux pour citations

La classe w3-panel est parfaite pour afficher des citations.

« Faites-le aussi simple que possible, mais pas plus simple. »

Exemple
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Essayez-le vous-même »

Pour en savoir plus sur les citations [Link], veuillez visiter le

chapitre Citations [Link] .

Panneaux pour les alertes

La classe w3-panel est parfaite pour afficher des alertes.

Les alertes sont souvent affichées à l'aide d'une couleur vive :

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Exemple
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

Essayez-le vous-même »

Pour en savoir plus sur les alertes [Link], veuillez consulter le

chapitre Alertes [Link] .

Panneaux comme cartes

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »
Panneaux arrondis
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Masquer (fermer) un panneau

Masquer un panneau est facile.

Cliquez sur le X pour fermer ce panneau.

Cliquez sur le X pour fermer ce panneau.

Exemple
<div class="w3-panel w3-display-container">
<span onclick="[Link]='none'"
class="w3-button w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>

Essayez-le vous-même »

Afficher (ouvrir) un panneau

Afficher un panneau (masqué) est facile :

Afficher le panneau
Exemple
<button class="w3-btn" onclic
k="[Link]('id01').[Link]='block'">Show
panel</button>

<div id="id01" class="w3-panel w3-green w3-display-

container" style="display:none">
<span onclick="[Link]='none'"
class="w3-button w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>

Essayez-le vous-même »

Bordures [Link]
❮ PrécédentSuivant ❯

J'ai des frontières.

Je n'ai qu'une bordure gauche.

J'ai une bordure supérieure et inférieure verte.

J'ai des bordures bleues.

J'ai une bordure gauche épaisse.

J'ai une épaisse bordure bleue en haut et en bas.

Bordure rouge qui devient verte au survol.

Classes de bordure [Link]

[Link] fournit les classes de bordure suivantes :

Classe Définit

bordure w3 Ajoute des bordures (haut, droite, bas,

gauche) à un élément
w3-bordure-haut Ajoute une bordure supérieure à un
élément

w3-bordure-droite Ajoute une bordure droite à un élément

w3-bordure-inférieure Ajoute une bordure inférieure à un

élément

w3-bordure-gauche Ajoute une bordure gauche à un

élément

w3-bordure-0 Supprime toutes les bordures

w3-border- couleur Affiche la bordure dans une couleur

spécifiée (comme le rouge, le bleu,
etc.)

w3-hover-border- couleur Ajoute une couleur de bordure

survolable

w3-barre inférieure Ajoute une bordure inférieure épaisse à

un élément

barre gauche w3 Ajoute une bordure gauche épaisse à

un élément

w3-barre de droite Ajoute une bordure droite épaisse à un

élément
 barre supérieure w3 Ajoute une bordure supérieure épaisse
à un élément

PUBLICITÉ

Ajout de bordures
Les classes w3-border sont utilisées pour ajouter des bordures à n'importe
quel élément HTML :

J'ai des frontières.

Je n'ai qu'une bordure gauche.

J'ai des bordures supérieures et inférieures.

Exemple
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>

<div class="w3-panel w3-border-left">

<p>I have only a left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom">

<p>I have top and bottom borders.</p>
</div>

Essayez-le vous-même »

Couleurs des bordures

Les classes w3-border -color sont utilisées pour ajouter des couleurs aux
bordures :

J'ai des bordures rouges.

J'ai une bordure gauche bleue.

J'ai une bordure supérieure et inférieure verte.

J'ai une bordure gauche rouge et une couleur d'arrière-plan rouge pâle.

Exemple
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>

<div class="w3-panel w3-border-left w3-border-blue">

<p>I have a blue left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom w3-border-

green">
<p>I have a green top and bottom border.</p>
</div>

Essayez-le vous-même »

Bordures arrondies
Pour ajouter des bordures arrondies, ajoutez l'une des classes w3-round -
size :

J'ai des bordures normales.

J'ai des petites bordures arrondies.

J'ai des bordures arrondies.

J'ai de grandes bordures arrondies.

J'ai des bordures arrondies très larges.

J'ai des bordures arrondies XXL.

Exemple
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>

<div class="w3-panel w3-border w3-round-small">

<p>My borders are rounded (small).</p>
</div>

<div class="w3-panel w3-border w3-round">

<p>My borders are rounded.</p>
</div>

<div class="w3-panel w3-border w3-round-large">

<p>I have large rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xlarge">

<p>I have xlarge rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xxlarge">

<p>I have xxlarge rounded borders.</p>
</div>

Essayez-le vous-même »

Bordures épaisses
Les classes w3-topbar , w3-bottombar , w3-leftbar et w3-rightbar sont
utilisées pour ajouter des bordures épaisses à un élément :

J'ai une bordure gauche épaisse.

J'ai une bordure gauche bleue épaisse.

J'ai une bordure gauche bleue épaisse et une couleur d'arrière-plan bleu pâle.

J'ai une bordure supérieure et inférieure rouge épaisse et une couleur

d'arrière-plan rouge pâle.

Exemple
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue">

<p>I have a thick blue left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">

<p>I have a thick blue left border and a pale-blue background
color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-
pale-red">
<p>I have a thick red top and bottom border and a pale-red
background color.</p>
</div>

Essayez-le vous-même »

Frontières survolables
Les classes de couleurs w3-hover-border- modifient la couleur de la
bordure lors du survol de la souris :

Bordure qui devient rouge au survol.

Bordure rouge qui devient verte au survol.

Exemple
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>

<div class="w3-panel w3-border w3-border-red w3-hover-border-

green">
<p>Red border that turns green on hover</p>
</div>

Essayez-le vous-même »

Bordure gauche épaisse (invisible) qui devient verte au survol.

Bordure inférieure épaisse (invisible) qui devient verte au survol.

Exemple
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-
green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>

<div class="w3-panel w3-bottombar w3-border-white w3-hover-

border-green">
<p>Thick (invisible) bottom border that turns green on
hover.</p>
</div>
Essayez-le vous-même »

Bordure blanche épaisse (invisible) qui devient verte au survol.

Bordure blanche épaisse (invisible) qui devient noire au survol.

Exemple
<div style="border:16px solid white" class="w3-panel w3-hover-
border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>

<div style="border:16px solid white" class="w3-panel w3-hover-

border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>

Essayez-le vous-même »

Cartes [Link]
❮ PrécédentSuivant ❯
John
Architecte et ingénieur

En-tête
Un peu de texte.. 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.

Pied de page

Classes de cartes [Link]

[Link] fournit les classes suivantes pour afficher des cartes de type papier :
 Classe Définit

carte w3 Identique à w3-card-2

w3-carte- Conteneur pour tout contenu HTML (ombre bordée de

2 2 px)

w3-carte- Conteneur pour tout contenu HTML (ombre bordée de

4 4 px)

Cartes colorées
Pour afficher des cartes colorées, ajoutez simplement la classe de
couleur w3 :

carte w3

w3-carte-2

w3-carte-4

Exemple (cartes blanches)

<div class="w3-card">
<p>w3-card</p>
</div>

Essayez-le vous-même »

Exemple (cartes jaunes)

<div class="w3-card w3-yellow">
<p>w3-card</p>
</div>

Essayez-le vous-même »
 PUBLICITÉ

Contenu de la carte
En-tête
Un peu de texte.. 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.

Pied de page

Ajoutez des conteneurs à l'intérieur de la carte pour créer différentes

sections :

Exemple
<div class="w3-card-4">

<header class="w3-container w3-blue">

<h1>Header</h1>
</header>

<div class="w3-container">
<p>Lorem ipsum...</p>
</div>

<footer class="w3-container w3-blue">

<h5>Footer</h5>
</footer>

</div>

Essayez-le vous-même »

Carte photo
 Les Alpes italiennes/autrichiennes

Exemple
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>The Italian / Austrian Alps</p>
</div>
</div>

Essayez-le vous-même »

Effet de survol
La classe w3-hover-shadow ajoute un effet d'ombre au survol - cela
donnera à n'importe quel élément l'apparence d'une carte au survol de la
souris (même style que w3-card-4).

Survolez-moi !

Exemple
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over me!</p>
</div>

Essayez-le vous-même »

Plus d'exemples
Demande d'ami

Jean Doe

Accepter Déclin

Exemple
<div class="w3-card-4 w3-dark-grey">

<div class="w3-container w3-center">

 <h3>Friend request</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>

<button class="w3-button w3-green">Accept</button>

<button class="w3-button w3-red">Decline</button>
</div>

</div>

Essayez-le vous-même »

Jean Doe
1 nouvelle demande d'ami

PDG chez Mighty Schools. Marketing et publicité. À la recherche d'un nouvel

emploi et de nouvelles opportunités.
+ Se connecter
Exemple
<div class="w3-card-4">

<header class="w3-container w3-light-grey">

<h3>John Doe</h3>
</header>

<div class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-
circle">
<p>President/CEO at Mighty Schools...</p>
</div>

<button class="w3-button w3-block w3-dark-grey">+

Connect</button>

</div>

Essayez-le vous-même »

Widget météo

LONDRES 60° F
LUN
 MAR

ÉPOUSER

Exemple
<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
<img src="img_london.jpg" alt="Lights" style="width:100%">
<div class="w3-xlarge w3-display-bottomleft w3-
padding">LONDON 60&deg; F</div>
</div>
<div class="w3-row">
<div class="w3-third w3-center">
<h3>MON</h3>
<img src="img_weather_sun.jpg" alt="sun">
</div>
<div class="w3-third w3-center">
<h3>TUE</h3>
<img src="img_weather_cloud.jpg" alt="cloud">
</div>
<div class="w3-third w3-center w3-margin-bottom">
<h3>WED</h3>
<img src="img_weather_clouds.jpg" alt="clouds">
</div>
</div>
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Valeurs par défaut de

[Link]
❮ PrécédentSuivant ❯
[Link] est facile à lire
Les pages [Link] sont faciles à lire, même pour les personnes ayant de
légères difficultés de lecture.

 La taille de police par défaut est de 15 px

 La police par défaut est Verdana, qui a un bon espacement des lettres
 L'espacement des lignes par défaut (1,5) est également très bon

Titres HTML <h1> - <h6>

Par défaut, [Link] stylise les titres HTML de cette manière :

Exemple

<h1>Heading 1
(36px)</h1>
<h2>Heading 2 (30px)</h2>
<h3>Heading 3 (24px)</h3>
<h4>Heading 4 (20px)</h4>
<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
Essayez-le vous-même »

Classes de taille de police

Les titres doivent être utilisés pour ce qu’ils sont : des titres.

Avec [Link], les tailles de police peuvent être définies par les classes de
taille w3 suivantes :
Exemple
w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Essayez-le vous-même »

PUBLICITÉ

Remplacement des valeurs par

défaut de [Link]
Remplacer les paramètres par défaut de [Link] est très simple.

Vous avez au moins trois options :

1. Remplacez les paramètres par défaut dans la section <head> de votre

page
2. Ajoutez votre propre fichier CSS après [Link]
3. Téléchargez et modifiez le contenu du fichier [Link]

Remplacer dans <head>

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}

Essayez-le vous-même »
Ajoutez votre propre CSS
<link rel="stylesheet" href="[Link]
[Link]">
<link rel="stylesheet" href="[Link]">

Changer [Link]
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-
size:20px} h5{font-size:18px} h6{font-size:16px}

Modification de la police par défaut

Dans l'en-tête de votre page Web (ou dans votre feuille de style), après avoir
chargé [Link], modifiez le style du HTML et du corps :

Exemple
<link rel="stylesheet" href="[Link]
[Link]">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: cursive, sans-serif;
}
</style>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Polices [Link]
❮ PrécédentSuivant ❯
Verdana est la police par défaut utilisée dans [Link]. Verdana a un bon espacement des lettres
et est facile à lire. Verdana est également la police par défaut de W3Schools.

Segoe UI est la police par défaut pour les titres. Segoe UI a un espacement des lettres plus étroit.
Cela permet d'ajouter quelques lettres supplémentaires dans les titres.

Utiliser une autre police par défaut

Utiliser une autre police par défaut dans [Link] est très simple :
Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}

Essayez-le vous-même »

Utilisation des classes de polices

Avec [Link], vous pouvez utiliser 4 classes de polices intégrées différentes :

 w3-serif
 w3-sans-serif
 w3-monospace

 w3-cursive

C'est du w3-serif
La Norvège a une superficie totale de 385 252 kilomètres carrés et une population de 5 438 657
habitants (décembre 2020). La Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés et une population
de 5 438 657 habitants (décembre 2020). La Norvège est bordée par la Suède, la
Finlande et la Russie au nord-est, et par le Skagerrak au sud, avec le Danemark de
l'autre côté.

Exemple
<p class="w3-serif">

Essayez-le vous-même »

C'est w3-sans-serif
La Norvège a une superficie totale de 385 252 kilomètres carrés et une population de 5
438 657 habitants (décembre 2020). La Norvège est bordée par la Suède, la Finlande et
la Russie au nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est
bordée par la Suède, la Finlande et la Russie au nord-est, et par le
Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
<p class="w3-sans-serif">

Essayez-le vous-même »

C'est w3-monospace
La Norvège a une superficie totale de 385 252 kilomètres carrés
et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au
nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre
côté.

La Norvège a une superficie totale de 385 252 kilomètres

carrés et une population de 5 438 657 habitants
(décembre 2020). La Norvège est bordée par la Suède, la
Finlande et la Russie au nord-est, et par le Skagerrak
au sud, avec le Danemark de l'autre côté.

Exemple
<div class="w3-monospace">

Essayez-le vous-même »

C'est w3-cursif
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.
Exemple
<div class="w3-cursive">

Essayez-le vous-même »

PUBLICITÉ

Polices sans empattement Web Safe

Famille de polices Solution de secours sécurisée

Aérien Helvetica, sans empattement

Helvética Arial, sans serif

Verdana Genève, sans serif

Genève Verdana, sans serif

Tahoma Arial, sans serif

Trébuchet MS Arial, sans serif

Arial est considérée comme la police sans empattement la plus sûre du Web. Elle est installée sur
toutes les machines Windows (99,8 %) et toutes les machines Mac (98,7 %).

Helvetica est la solution de secours préférée car les deux polices sont presque identiques.
Helvetica fonctionne sur toutes les machines Mac (100 %) mais sur moins de machines Windows
(7,3 %).
Utiliser Arial avec Helvetica fallback, ou Helvetiva avec Arial fallback, couvre les deux mondes.

Verdana est également considérée comme une police sans empattement sûre pour le Web. Elle
fonctionne sur toutes les machines Windows (99,8 %) et toutes les machines Mac (99,1 %).

Geneva est la police de secours préférée de Verdana, car les deux polices sont assez similaires et
Geneva fonctionne sur toutes les machines Mac (99,6 %).

Tahoma était la police standard de Windows 95. Elle fonctionne sur 99,9 % de toutes les
machines Windows et 91,7 % de toutes les machines Mac.

Trebuchet MS est disponible avec tous les systèmes d'exploitation Windows (99,7%) depuis
Microsoft Windows 2000. Il est également inclus sur les machines Mac (97,1%), iOS et Chrome
OS.

Source : Pile de polices CSS

C'est Arial
La Norvège a une superficie totale de 385 252 kilomètres carrés et une population de 5
438 657 habitants (décembre 2020). La Norvège est bordée par la Suède, la Finlande et
la Russie au nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés et une

population de 5 438 657 habitants (décembre 2020). La Norvège est
bordée par la Suède, la Finlande et la Russie au nord-est, et par le
Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
</style>

Essayez-le vous-même »

Arial est classé n°1 en termes d'utilisation sur le Web.

C'est Helvetica
La Norvège a une superficie totale de 385 252 kilomètres carrés et une population de 5
438 657 habitants (décembre 2020). La Norvège est bordée par la Suède, la Finlande et
la Russie au nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés et une

population de 5 438 657 habitants (décembre 2020). La Norvège est
bordée par la Suède, la Finlande et la Russie au nord-est, et par le
Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, sans-serif;
}
</style>

Essayez-le vous-même »

Helvetica est classé n°2 en termes d'utilisation sur le Web.

C'est Verdana
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Geneva, sans-serif;
}

Essayez-le vous-même »

Verdana est classé n°3 en termes d'utilisation sur le Web.

C'est Genève
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: Geneva, Verdana, sans-serif;
}

Essayez-le vous-même »

C'est Tahoma
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: Tahoma, "Trebuchet MS", sans-serif;
}

Essayez-le vous-même »

C'est Trebuchet MS
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, sans-serif;
}

Essayez-le vous-même »

C'est l'interface utilisateur de Segoe

La Norvège a une superficie totale de 385 252 kilomètres carrés et une population de 5 438 657
habitants (décembre 2020). La Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés et une population
de 5 438 657 habitants (décembre 2020). La Norvège est bordée par la Suède, la
Finlande et la Russie au nord-est, et par le Skagerrak au sud, avec le Danemark de
l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI", Arial, sans-serif
}

Essayez-le vous-même »

Segoe UI est la police par défaut dans Windows 10. C'est également la police de titre par défaut
dans W3Schools et [Link].

Polices Serif Web Safe

 Famille de polices Solution de secours sécurisée

Times New Roman Heures, serif

Géorgie empattement

Times New Roman est considérée comme la police serif la plus sûre sur le Web. Elle fonctionne
sur toutes les machines Windows (99,7 %) et toutes les machines Mac (97,4 %).

Certains systèmes d'exploitation plus anciens peuvent avoir une version alternative
appelée Times , il est donc judicieux d'utiliser Times comme solution de secours ainsi que serif.

La Géorgie est également considérée comme très sûre. Elle est un peu plus grande que Times
New Roman, mais fonctionne bien sur la plupart des machines Windows (99,4 %) et Mac (97,5
%).

Pour plus de sécurité, utilisez serif comme solution de secours.

C'est Times New Roman

La Norvège a une superficie totale de 385 252 kilomètres carrés et une population de 5 438 657
habitants (décembre 2020). La Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés et une population
de 5 438 657 habitants (décembre 2020). La Norvège est bordée par la Suède, la
Finlande et la Russie au nord-est, et par le Skagerrak au sud, avec le Danemark de
l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: "Times New Roman", Times, serif;
}

Essayez-le vous-même »
C'est la Géorgie
La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au
sud, avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au
nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre
côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
}

Essayez-le vous-même »

Polices monospace
Dans une police monospace, toutes les lettres occupent la même largeur.

Les polices à espacement fixe sont souvent utilisées pour afficher du code
informatique.

Famille de polices Solution de secours sécurisée

Courrier Nouveau monospace

Console Lucida Monaco, monospace

Monaco Console Lucida, monospace

Courier New est considérée comme la police monospace la plus sûre sur le
Web. Elle est installée sur la plupart des machines Windows et Mac.

La console Lucida ne fonctionne pas sur Mac. Monaco ne fonctionne pas

sur Windows.

Une solution consiste à utiliser Monaco comme solution de secours pour

Lucida Console.

Il n'existe pas de polices Web 100 % sûres, mais vous pouvez toujours
utiliser w3-monospace .

C'est w3-monospace
La Norvège a une superficie totale de 385 252 kilomètres carrés
et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au
nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre
côté.

La Norvège a une superficie totale de 385 252 kilomètres

carrés et une population de 5 438 657 habitants
(décembre 2020). La Norvège est bordée par la Suède, la
Finlande et la Russie au nord-est, et par le Skagerrak
au sud, avec le Danemark de l'autre côté.

Exemple
<div class="w3-monospace">

Essayez-le vous-même »

C'est Courier New

La Norvège a une superficie totale de 385 252 kilomètres carrés
et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au
nord-est, et par le Skagerrak au sud, avec le Danemark de l'autre
côté.

La Norvège a une superficie totale de 385 252 kilomètres

carrés et une population de 5 438 657 habitants
(décembre 2020). La Norvège est bordée par la Suède, la
Finlande et la Russie au nord-est, et par le Skagerrak
au sud, avec le Danemark de l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: "Courier New", monospace;
}

Essayez-le vous-même »

C'est Lucida ou Monaco

La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lucida Console", Monaco, monospace;
}

Essayez-le vous-même »

Polices d'écriture
manuscrite
Il n'existe pas de polices d'écriture manuscrite sûres pour le Web, mais vous
pouvez utiliser w3-cursive en toute sécurité .

C'est w3-cursif
 La Norvège a une superficie totale de 385 252 kilomètres carrés et une
population de 5 438 657 habitants (décembre 2020). La Norvège est bordée
par la Suède, la Finlande et la Russie au nord-est, et par le Skagerrak au sud,
avec le Danemark de l'autre côté.

La Norvège a une superficie totale de 385 252 kilomètres carrés

et une population de 5 438 657 habitants (décembre 2020). La
Norvège est bordée par la Suède, la Finlande et la Russie au nord-
est, et par le Skagerrak au sud, avec le Danemark de l'autre côté.

Exemple
<div class="w3-cursive">

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Polices Google [Link]

❮ PrécédentSuivant ❯
Avec [Link], il est extrêmement facile d'ajouter de nouvelles polices.

 Très simple à utiliser (uniquement CSS et HTML)

 Utilisation illimitée de bibliothèques de polices externes (comme
Google Fonts)
 Fonctionne dans tous les navigateurs modernes

C'est Roboto
C'est Sofia
Sofia en feu
Créer le Web !
Créer le Web !
Créer le Web !
Créer le Web !
Créer le Web !

Utilisation des polices Google

Les polices Google sont gratuites et proposent plus de 1 000 polices parmi
lesquelles choisir.

Dans l'en-tête de votre page Web, créez un lien vers une police Google :

<link rel="stylesheet" href="[Link]

family=Roboto">

Ajoutez ensuite le CSS indiquant où l'utiliser :

body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}

Essayez-le vous-même »

Un autre exemple
<link rel="stylesheet" href="[Link]
family=Sofia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}

Essayez-le vous-même »

Créer une classe de police

Dans l'en-tête de votre page Web, créez un lien vers une police Google :

<link rel="stylesheet" href="[Link]

family=Sofia">

Créez ensuite une classe de police :

Exemple
.w3-sofia {
font-family: Sofia, cursive;
}

Dans votre page Web, utilisez la classe de police :

Exemple
<p class="w3-sofia">Making the Web!</p>

Essayez-le vous-même »

Créer le Web !
Exemple
<link rel="stylesheet" href="[Link]
family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}

<p class="w3-tangerine">Making the Web Beautiful!</p>

Essayez-le vous-même »

Créer le Web !
Exemple
<link rel="stylesheet"
href="[Link]
Essayez-le vous-même »

Créer le Web !
Exemple
<link rel="stylesheet"
href="[Link]
family=Lobster&effect=shadow-multiple">

Essayez-le vous-même »

Créer le Web !
Exemple
<link rel="stylesheet"
href="[Link]

Essayez-le vous-même »

Créer le Web !
❮ PrécédentSuivant ❯

Texte [Link]
❮ PrécédentSuivant ❯

Alignement du texte
Les classes w3-left-align et w3-right-align sont utilisées pour aligner le
texte.
Texte aligné à gauche.

Texte aligné à droite.

Exemple
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>

Essayez-le vous-même »

Éléments de centrage
La classe w3-center est utilisée pour centrer les éléments :

Contenu centré

Du texte centré.

Exemple
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-
width:320px">
 <p>Some centered text.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Texte large
La classe w3-wide spécifie un texte plus large :

Ce texte est normal.

Ce texte est plus large.

Exemple
<p class="w3-wide">The w3-wide class specifies a wider text.</p>

Essayez-le vous-même »

Opacité du texte
La classe w3-opacity est conçue pour fonctionner avec toutes les couleurs :

Opacité du texte
Opacité du texte
Opacité du texte
Opacité du texte
Exemple
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>

Essayez-le vous-même »
Ombre du texte
La propriété CSS3 text-shadow peut être utilisée pour ajouter des effets
d'ombre ou de flou au texte :

Ombre du texte

Ombre du texte

Ombre du texte

Ombre du texte
Exemple
<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">Text
Shadow</h2>

Essayez-le vous-même »

Effets spéciaux
Opacité du texte + Gras
Texte jaune + ombre +
gras
Texte orange + ombre +
gras
Exemple
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>

<div class="w3-panel w3-amber">

<h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>

<div class="w3-panel w3-blue">

<h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>

Essayez-le vous-même »
L'ombre du texte ne fonctionne pas dans IE 9 et les versions antérieures.

❮ PrécédentSuivant ❯

Classes rondes [Link]

❮ PrécédentSuivant ❯

w3-rond-petit

w3-rond

w3-rond-grand

w3-rond-xlarge

w3-rond-xxlarge

Les classes w3-round- size ajoutent des coins arrondis à n'importe quel
élément HTML :

Classe Définit
 w3-rond Élément arrondi (bordure-rayon) 4px

w3-rond-petit Élément arrondi (bordure-rayon) 2px

w3-rond-moyen Élément arrondi (bordure-rayon) 4px

w3-rond-grand Élément arrondi (bordure-rayon) 8px

w3-rond-xlarge Élément arrondi (bordure-rayon) 16px

w3-rond-xxlarge Élément arrondi (bordure-rayon) 32px

Exemple
<div class="w3-round w3-teal">w3-round</div>

Essayez-le vous-même »

La classe du cercle
La classe w3-circle affiche le contenu à l'intérieur d'un cercle.

Une image à l'intérieur d'un cercle

Exemple
<img class="w3-circle" src="img_car.jpg" alt="Car">

Essayez-le vous-même »

PUBLICITÉ

Texte à l'intérieur d'un cercle

Texte à l'intérieur d'un
cercle
Exemple
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h1>The w3-circle Class</h1>
</div>

Essayez-le vous-même »
Un cercle à l'intérieur d'un cercle

Bonjour
[Link] !
Exemple 1
<div class="w3-padding-32 w3-green w3-circle">
<img src="img_car.jpg" class="w3-circle" style="width:75%">
</div>

Essayez-le vous-même »

Exemple 2
<div class="w3-padding-32 w3-green w3-circle">
<div class="w3-padding-32 w3-red w3-circle w3-
center" style="width:55%">
<p class="w3-xlarge">Hello<br>[Link]!</p>
</div>
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯
Rembourrage [Link]
❮ PrécédentSuivant ❯

w3-rembourrage-large
J'ai un remplissage de 12 px en haut et en bas et un remplissage de 24 px à
gauche et à droite.

Classes de remplissage [Link]

Les classes w3-padding- number ajoutent un remplissage supérieur et
inférieur à n'importe quel élément HTML :

Classe Définit

w3-rembourrage- Ajoute un remplissage supérieur et inférieur de

16 16 px à un élément

w3-rembourrage- Ajoute un remplissage supérieur et inférieur de

24 24 px à un élément

w3-rembourrage- Ajoute un remplissage supérieur et inférieur de

32 32 px à un élément

w3-rembourrage- Ajoute un remplissage supérieur et inférieur de

48 48 px à un élément

w3-rembourrage- Ajoute un remplissage supérieur et inférieur de

64 64 px à un élément
Exemples :
w3-rembourrage-16
J'ai un remplissage supérieur et inférieur de 16 px

w3-rembourrage-24
J'ai un remplissage supérieur et inférieur de 24 px

w3-rembourrage-32
J'ai un remplissage supérieur et inférieur de 32 px

w3-rembourrage-48
J'ai un remplissage supérieur et inférieur de 48 px

w3-rembourrage-64
J'ai un remplissage supérieur et inférieur de 64 px

Exemple
<div class="w3-panel w3-padding-16">
<p>I have 16px top and bottom padding.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Classes de taille de remplissage

[Link]
Les classes w3-padding- size ajoutent un remplissage en haut, en bas, à
droite et à gauche à n'importe quel élément HTML :
 Classe Définit

Rembourrage w3 Ajoute 8 px en haut et en bas et 16 px de

remplissage à gauche et à droite

w3-rembourrage- Ajoute 4 px en haut et en bas et 8 px de

petit remplissage à gauche et à droite

w3-rembourrage- Ajoute 12 px en haut et en bas et 24 px de

large remplissage à gauche et à droite

Exemples :
w3-rembourrage-petit
J'ai un remplissage de 4 px en haut et en bas et un remplissage de 8 px à
gauche et à droite.

Rembourrage w3
J'ai un remplissage de 8 px en haut et en bas et un remplissage de 16 px à
gauche et à droite.

w3-rembourrage-large
J'ai un remplissage de 12 px en haut et en bas et un remplissage de 24 px à
gauche et à droite.

Exemple
<div class="w3-panel w3-padding-large">
<p>I have 12px top and bottom padding and 24px left and right
padding.</p>
</div>

Essayez-le vous-même »
❮ PrécédentSuivant ❯

Marges [Link]
❮ PrécédentSuivant ❯

La classe w3-margin ajoute une marge de 16 px à tous les côtés d'un

élément.

Classes de marge [Link]

[Link] fournit les classes de marge suivantes :

Classe Définit

marge w3 Ajoute une marge de 16 px à tous les côtés d'un

élément

w3-marge-haut Ajoute une marge supérieure de 16 px à un

élément

w3-marge-droite Ajoute une marge droite de 16 px à un élément

w3-marge- Ajoute une marge inférieure de 16 px à un

inférieure élément

w3-marge- Ajoute une marge gauche de 16 px à un

gauche élément
 section w3 Ajoute une marge supérieure et inférieure de
16 px à un élément

Marge
La classe w3-margin ajoute une marge de 16 px à tous les côtés d'un
élément :

La classe w3-margin ajoute une marge de 16 px à tous les côtés d'un

élément.

Exemple
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>

Essayez-le vous-même »

Marge supérieure
La classe w3-margin-top ajoute une marge supérieure de 16 px à un
élément :

La classe w3-margin-top ajoute une marge supérieure de 16 px à un

élément.

Exemple
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ
Marge inférieure
La classe w3-margin-bottom ajoute une marge inférieure de 16 px à un
élément :

La classe w3-margin-bottom ajoute une marge inférieure de 16 px à un

élément.

Exemple
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>

Essayez-le vous-même »

Marge gauche
La classe w3-margin-left ajoute une marge gauche de 16 px à un élément :

La classe w3-margin-left ajoute une marge gauche de 16 px à un élément.

Exemple
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>

Essayez-le vous-même »

Marge droite
La classe w3-margin-right ajoute une marge droite de 16 px à un élément :

La classe w3-margin-right ajoute une marge droite de 16 px à un élément.

Exemple
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>

Essayez-le vous-même »
Sections
De nombreux éléments HTML n'ont pas de marge supérieure ou inférieure par
défaut. Ces éléments s'afficheront sans marge entre eux :

Je suis bleu
Je suis vert
La classe w3-section peut être utilisée pour séparer des éléments.

Il ajoute une marge supérieure et inférieure de 16 px à n’importe quel

élément HTML :

Je suis bleu
Je suis vert
Exemple
<div class="w3-container w3-section w3-blue">
<h1>I am Blue</h1>
</div>

<div class="w3-container w3-section w3-green">

<h1>I am Green</h1>
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Affichage [Link]
❮ PrécédentSuivant ❯
Les classes d'affichage vous permettent d'afficher des éléments HTML dans
des positions spécifiques à l'intérieur d'autres éléments HTML :

En haut à gauche
En haut à droite
En bas à gauche
En bas à droite
Gauche
Droite
Milieu
Haut Milieu
En bas au milieu

Classes d'affichage [Link]

[Link] fournit les classes d'affichage suivantes :

Classe Définit

conteneur Conteneur pour les classes w3-display

d'affichage w3

w3-affichage-en- Affiche le contenu dans le coin supérieur

haut-gauche gauche du conteneur w3-display

w3-affichage-en Affiche le contenu dans le coin supérieur

haut à droite droit du conteneur w3-display

w3-affichage-en- Affiche le contenu dans le coin inférieur

bas-gauche gauche du conteneur w3-display

w3-affichage-en- Affiche le contenu dans le coin inférieur droit

bas-droite du conteneur w3-display
w3-affichage- Affiche le contenu à gauche (au milieu à
gauche gauche) du conteneur w3-display

w3-affichage-droite Affiche le contenu à droite (au milieu à

droite) du conteneur w3-display

w3-affichage-milieu Affiche le contenu au milieu (centre) du

conteneur w3-display

w3-affichage-haut- Affiche le contenu en haut au milieu du

milieu conteneur w3-display

w3-affichage-bas- Affiche le contenu en bas au milieu du

milieu conteneur w3-display

w3-position- Affiche le contenu à une position spécifiée

d'affichage dans le conteneur w3-display

w3-affichage-survol Affiche le contenu au survol à l'intérieur du

conteneur w3-display

w3-gauche Fait flotter un élément vers la gauche (float:

left)

w3-droite Fait flotter un élément vers la droite (float:

right)

w3-émission Affiche un élément (affichage : bloc)

 w3-masquer Masque un élément (affichage : aucun)

w3-mobile Ajoute une réactivité mobile à n'importe quel

élément.
Affiche les éléments sous forme d'éléments
de bloc sur les appareils mobiles

PUBLICITÉ

Exemples
Exemple
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>

Essayez-le vous-même »

Même exemple que ci-dessus avec un remplissage ajouté :

En haut à gauche
En haut à droite
En bas à gauche
En bas à droite
Gauche
Droite
Milieu
Haut Milieu
En bas au milieu
Exemple
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom
Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom
Mid</div>
</div>

Essayez-le vous-même »

Afficher du texte à l'intérieur d'une image :

En haut à gauche
En haut à droite
En bas à gauche
En bas à droite
Haut Milieu
Gauche
Droite
Milieu
Bas Milieu
Exemple
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom
Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom
Mid</div>
</div>

Essayez-le vous-même »

Affichage en survol
La classe w3-display-hover affiche le contenu au survol à l'intérieur d'un
conteneur w3-display (passe de caché à affiché).

Passez la souris sur cette case !

Exemple
<div class="w3-display-container w3-light-
grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div class="w3-display-topright w3-display-hover">Top
Right</div>
<div class="w3-display-bottomleft w3-display-hover">Bottom
Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom
Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div class="w3-display-right w3-display-hover">Right</div>
<div class="w3-display-middle">Mouse over this box!</div>
<div class="w3-display-topmiddle w3-display-hover">Top
Mid</div>
<div class="w3-display-bottommiddle w3-display-hover">Bottom
Mid</div>
</div>

Essayez-le vous-même »

Les classes w3-display-hover peuvent être combinées avec des

classes d'effets et d'animation pour créer des effets de survol sympas :
Exemple
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png" alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">John Doe</button>
</div>
</div>

Essayez-le vous-même »

Vous en apprendrez davantage sur les animations et les effets plus tard dans
ce didacticiel.

Affichage d'un drapeau

Avec un peu d'imagination, les classes w3-display peuvent être utilisées pour
créer un drapeau :

Exemple
<div class="w3-display-container w3-card-
4" style="height:200px;width:350px">
<div class="w3-red w3-display-
topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-
topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-
bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-
bottomright" style="width:60%;height:40%"></div>
</div>

Essayez-le vous-même »

Cours flottants
La classe w3-left fait flotter un élément vers la gauche, la classe w3-right
fait flotter un élément vers la droite :

w3-gauche
w3-droite
Exemple
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>

Essayez-le vous-même »
Remarque : effacez les flottants avec la classe w3-clear ou placez-les dans
un w3-container , comme dans l'exemple ci-dessus (efface les flottants
automatiquement).

Masquer et afficher
Forcer un élément à être affiché ou masqué avec la classe w3-show ou w3-
hide .

Exemple
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>

Essayez-le vous-même »
Ces classes sont souvent utilisées pour basculer entre le masquage et
l’affichage d’éléments :

Exemple
Basculer entre masquer et afficher
Essayez-le vous-même »

La classe w3-mobile
La classe w3-mobile ajoute une réactivité mobile d'abord à n'importe quel
élément.

Il ajoute display:block et width:100% à un élément sur les écrans dont la

largeur est inférieure à 600 px.

Exemple
<button class="w3-button w3-mobile">Link</button>

Essayez-le vous-même »

Boutons [Link]
❮ PrécédentSuivant ❯

Bouton Bouton Bouton Bouton Bouton Bouton Désactivé

Bouton Bouton Bouton Bouton Bouton Bouton Désactivé
Bouton Bouton Bouton Bouton Bouton Ombre Bouton
+++
Bouton1Bouton2Bouton 3
BoutonBouton

Classes de boutons [Link]

[Link] fournit les classes suivantes pour les boutons :
 Classe Définit

touche w3 Un bouton rectangulaire avec un effet de

survol d'ombre.
La couleur par défaut est le noir.

bouton w3 Un bouton rectangulaire avec un effet de

survol gris.
La couleur par défaut est le gris clair dans la
version 3 de [Link].
La couleur par défaut est héritée de l'élément
parent dans la version 4.

barre w3 Une barre horizontale qui peut être utilisée

pour regrouper des boutons.
(Parfait pour les menus de navigation
horizontaux)

bloc w3 Classe qui peut être utilisée pour définir un

bouton pleine largeur (100 %).

cercle w3 Peut être utilisé pour définir un bouton

circulaire.

ondulation w3 Peut être utilisé pour créer un effet

d'entraînement.

Boutons
La classe w3-button et la classe w3-btn ajoutent toutes deux un
comportement de bouton à tous les éléments HTML.
Les éléments les plus courants à utiliser sont <input type="button">,
<button> et <a> :

Exemple
<input class="w3-button w3-black" type="button" value="Input
Button">
<button class="w3-button w3-black">Button Button</button>
<a href="[Link] class="w3-button w3-
black">Link Button</a>

<input class="w3-btn w3-black" type="button" value="Input

Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="[Link] class="w3-btn w3-black">Link
Button</a>

Essayez-le vous-même »

PUBLICITÉ

Couleurs des boutons

Noir Kaki Jaune Rouge Violet Aqua Bleu Indigo Vert Sarcelle

Toutes les classes de couleurs w3 sont utilisées pour ajouter de la couleur

aux boutons :

Exemple
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>

Essayez-le vous-même »

Couleurs de survol
Les effets de survol sont également disponibles dans toutes les couleurs. En
voici quelques-uns :
Blanc Rouge Violet Aqua Bleu Vert Sarcelle

Les classes de couleurs w3-hover- sont utilisées pour ajouter une couleur
de survol aux boutons :

Exemple
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>

Essayez-le vous-même »

Formes de boutons
Normale Rond Rondeur et plus rond et plus rond

Normale Rond Rondeur et plus rond et plus rond

Les classes w3-round- size sont utilisées pour ajouter des bordures
arrondies aux boutons :

Exemple
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>

<button class="w3-btn w3-round">Round</button>

<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>

Essayez-le vous-même »

Tailles des boutons

Minuscule Petit Moyen Grand XL

Les classes de taille w3 peuvent être utilisées pour définir différentes tailles
de texte :

Exemple
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>

Essayez-le vous-même »

Bordures des boutons

Bouton Bouton Bouton Bouton

Bouton Bouton Bouton Bouton

La classe w3-border peut être utilisée pour ajouter des bordures aux
boutons.

Les classes w3-border- color sont utilisées pour définir la couleur de la

bordure :

Exemple
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-
blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-
round-large">Button</button>

Essayez-le vous-même »
Astuce : ajoutez la classe w3-round- size pour ajouter des bordures
arrondies.

Boutons avec différents effets de

texte
Les boutons peuvent utiliser des effets de texte plus larges :

Normale Large
La classe w3-wide ajoute un effet de texte plus large :

Exemple
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>

Essayez-le vous-même »

Les boutons peuvent avoir des effets de texte en italique et en gras :

Normale Italique Audacieux

Utilisez des balises HTML standard (<i> et <b>) pour ajouter un effet italique
ou gras au texte du bouton :

Exemple
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>

Essayez-le vous-même »

Boutons avec rembourrage

Bouton Bouton Bouton

Bouton Bouton Bouton

Les classes w3-padding- size sont utilisées pour ajouter un remplissage

supplémentaire autour du texte du bouton :

Exemple
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>

<button class="w3-btn w3-padding-small">Button</button>

<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>

Essayez-le vous-même »
Boutons pleine largeur
Pour créer un bouton pleine largeur, ajoutez la classe w3-block au bouton.

Les boutons pleine largeur ont une largeur de 100 % et s'étendent sur toute
la largeur de l'élément parent :

Bouton

Bouton

Bouton

Bouton

Bouton

Bouton

Exemple
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-
align">Button</button>

<button class="w3-btn w3-block">Button</button>

<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-
align">Button</button>

Essayez-le vous-même »
Astuce : alignez le texte du bouton avec la classe w3-left-align ou la
classe w3-right-align .

La taille d'un bloc peut être définie à l'aide de style="width:" .

BoutonBoutonBouton

Exemple
<button class="w3-button w3-block w3-
black" style="width:30%">Button</button>
<button class="w3-button w3-block w3-
teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-
red" style="width:80%">Button</button>

Essayez-le vous-même »
Boutons désactivés
Les boutons ressortent grâce à un effet d'ombre et le curseur se transforme
en main lorsque la souris passe dessus.

Les boutons désactivés sont opaques (semi-transparents) et affichent un «

panneau d'interdiction de stationnement » :

Bouton Désactivé

Bouton Désactivé

La classe w3-disabled est utilisée pour créer un bouton désactivé (si

l'élément prend en charge l'attribut HTML standard désactivé, vous pouvez
utiliser l'attribut désactivé à la place) :

Exemple
<a class="w3-button w3-
disabled" href="[Link] Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>

<a class="w3-btn w3-

disabled" href="[Link] Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>

Essayez-le vous-même »

Barres de boutons
Les boutons peuvent être regroupés dans une barre horizontale à l'aide de la
classe w3-bar :

Bouton Bouton Bouton

Exemple
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
Essayez-le vous-même »
La classe w3-bar a été introduite dans la version [Link] 2.93 / 2.94.

Les boutons peuvent être regroupés sans espace entre eux en utilisant la
classe w3-bar-item :

BoutonBoutonBouton
Exemple
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>

Essayez-le vous-même »

Les barres de boutons peuvent être centrées à l'aide de la classe w3-center :

Bouton Bouton Bouton

Exemple
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>

Essayez-le vous-même »

Pour afficher deux (ou plusieurs) barres de boutons sur la même ligne,
ajoutez la classe w3-show-inline-block :

BoutonBoutonBouton

BoutonBoutonBouton
Exemple
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button class="w3-btn w3-teal">Button</button>
<button class="w3-btn w3-disabled">Button</button>
</div>
</div>

<div class="w3-show-inline-block">
<div class="w3-bar">
 <button class="w3-btn">Button</button>
<button class="w3-btn w3-teal">Button</button>
<button class="w3-btn w3-disabled">Button</button>
</div>
</div>

Essayez-le vous-même »

Barres de navigation
Les barres de boutons peuvent facilement être utilisées comme barres de
navigation :

BoutonBoutonBouton

BoutonBoutonBouton

BoutonBoutonBouton

BoutonBoutonBouton
Exemple
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>

Essayez-le vous-même »

La taille de chaque élément peut être définie en utilisant style="width:" :

BoutonBoutonBouton
Exemple
<div class="w3-bar">
<button class="w3-bar-item w3-
button" style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button w3-
teal" style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button w3-
red" style="width:33.3%">Button</button>
</div>

Essayez-le vous-même »
Vous en apprendrez davantage sur la navigation plus tard dans ce didacticiel.
Boutons gauche et droit
Utilisez la classe .w3-left et la classe .w3-right pour faire flotter les boutons
vers la gauche ou vers la droite :

GaucheDroite

Utilisé pour créer des boutons « précédent/suivant » :

" PrécédentSuivant "

Exemple
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>

Essayez-le vous-même »

Boutons avec effets d'entraînement

La classe w3-ripple crée un effet d'entraînement sur les boutons (lorsqu'ils
sont cliqués) :

Bouton Bouton Bouton

Bouton Bouton Bouton

Exemple
<button class="w3-button w3-ripple">Button</button>
<button class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button w3-ripple w3-yellow">Button</button>

Essayez-le vous-même »

Tous les éléments peuvent être des

boutons
Avec [Link], tous les éléments peuvent être un bouton :
Une image peut être un bouton w3

Une image peut être un w3-btn

 N'importe quel div, en-tête, pied de page ou autre conteneur peut être
un bouton w3 !

N'importe quel div, en-tête, pied de page ou autre conteneur peut être
un w3-btn !

Boutons circulaires
La classe w3-circle peut être utilisée pour créer des boutons circulaires :

++

Exemple
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>

Essayez-le vous-même »

Boutons carrés :

++

Exemple
<button class="w3-button w3-black">+</button>
<button class="w3-button w3-teal">+</button>

Essayez-le vous-même »

Notes sur [Link]

❮ PrécédentSuivant ❯

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Notes et informations
La classe w3-panel est la classe parfaite pour afficher des notes et des
informations.

Les notes sont souvent affichées avec une couleur :

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone

métropolitaine de plus de 9 millions d'habitants.

Exemple
<div class="w3-panel w3-yellow">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Plus d'exemples
Gris avec bordure arrondie
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.
<div class="w3-panel w3-border w3-light-grey w3-round-large">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Bleu pâle avec barre gauche et

droite
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

<div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-

border-blue">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Rouge pâle avec barre à gauche

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">

<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Jaune pâle avec bordure

Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">

<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Vert pâle avec bordure et barre

inférieure
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

<div class="w3-panel w3-pale-green w3-bottombar w3-border-green

w3-border">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Jaune avec des barres supérieures et

inférieures
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

<div class="w3-panel w3-yellow w3-topbar w3-bottombar w3-border-

amber">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Guide de l'écol

Citations [Link]
❮ PrécédentSuivant ❯

❝
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut non massa vitae risus
fermentum ullamcorper. Phasellus risus urna,
ornare in aliquam id, porttitor sit amet sapien.
Nulla facilisi.

Affichage des citations

La classe w3-panel est la classe parfaite pour afficher des citations.

Les citations sont souvent affichées avec un arrière-plan gris, une barre de
bordure à gauche et un style de police en italique :

« Faites-le aussi simple que possible, mais pas plus simple. »

Albert Einstein

Exemple
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>

Essayez-le vous-même »

Grandes citations
Les grandes citations sont souvent utilisées sur Internet :

« Faites-le aussi simple que possible,

mais pas plus simple. »
Albert Einstein

Exemple
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Citations en bloc
Si vous utilisez l'élément HTML standard <blockquote>, notez que le
navigateur ajoutera une marge gauche et droite supplémentaire :

« Faites-le aussi simple que possible, mais pas plus simple. »

Albert Einstein

Exemple
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>

Essayez-le vous-même »

Utilisation des symboles HTML

Vous pouvez utiliser des symboles HTML standard au lieu des esperluettes :

Symbole Code

≪ #8810
 ✂ #9986

❝ #10077

❞ #10078

❠ #10080

✔ #10004

❝
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut non massa vitae risus
fermentum ullamcorper. Phasellus risus urna,
ornare in aliquam id, porttitor sit amet sapien.
Nulla facilisi.

✂
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut non massa vitae risus
fermentum ullamcorper. Phasellus risus urna,
ornare in aliquam id, porttitor sit amet sapien.
Nulla facilisi.
Exemple
<div class="w3-panel w3-light-grey">
<span style="font-size:150px;line-
height:0.6em;opacity:0.2">&#10077;</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing
elit ..."</i></p>
<p>Albert Einstein</p>
</div>

Essayez-le vous-même »

✔ La programmation en C va progressivement

décliner.
La programmation en JavaScript va prendre plus
d'importance.
Exemple
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i class="w3-serif w3-xlarge">
<span style="font-size:150px;line-
height:0.6em;opacity:0.2">&#10004;</span>
Programming in C will slowly decline.<br>
Programming in JavaScript will be more important.</i></p>
</div>

Essayez-le vous-même »
Utilisation des icônes Font Awesome
Vous pouvez également utiliser des icônes de la bibliothèque Font Awesome :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut

non massa vitae risus fermentum ullamcorper. Phasellus risus
urna, ornare in aliquam id, porttitor sit amet sapien. Nulla
facilisi.
Exemple
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</i></p>
</div>

Essayez-le vous-même »

Vous pouvez également modifier la couleur et l'opacité :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut

non massa vitae risus fermentum ullamcorper. Phasellus risus
urna, ornare in aliquam id, porttitor sit amet sapien. Nulla
facilisi.
Exemple
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge w3-opacity"></i>
<span class="w3-serif w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</span></p>
</div>

Essayez-le vous-même »

Une citation noire :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus
fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit
amet sapien. Nulla facilisi.
Exemple
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>

Essayez-le vous-même »

Afficher les citations sous forme de

cartes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus
fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit
amet sapien. Nulla facilisi.

Exemple
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>

Essayez-le vous-même »

❝
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
massa vitae risus fermentum ullamcorper. Phasellus risus urna,
ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

Exemple
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span style="font-size:100px">&#10077;</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</b></i></p>
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Alertes [Link]
❮ PrécédentSuivant ❯

La classe w3-panel est la classe parfaite pour afficher tous les types d'alertes
:

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Les alertes sont souvent affichées à l'aide d'une couleur vive :

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Exemple
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

Essayez-le vous-même »

Avertissements sur l'affichage

×
Avertissement!
Le jaune indique souvent un avertissement qui pourrait nécessiter une
attention particulière.

Avertissement!
Le jaune indique souvent un avertissement qui pourrait nécessiter une
attention particulière.

Exemple
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need
attention.</p>
</div>

Essayez-le vous-même »

Afficher les succès

×

Succès!
Le vert indique souvent quelque chose de réussi ou de positif.

Succès!
Le vert indique souvent quelque chose de réussi ou de positif.

Exemple
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful or positive.</p>
</div>

Essayez-le vous-même »
Afficher les informations
×

Info!
Le bleu indique souvent un changement ou une action informative neutre.

Info!
Le bleu indique souvent un changement ou une action informative neutre.

Exemple
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral informative change or
action.</p>
</div>

Essayez-le vous-même »

Utilisation d'un conteneur

La classe w3-container peut également être utilisée pour afficher des
alertes :

Exemple
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Des alertes dans toutes les couleurs

Les alertes sont souvent affichées dans des couleurs spéciales, mais
n'importe quelle couleur peut être utilisée :

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Exemple
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

Essayez-le vous-même »

Alertes de fermeture
Pour fermer la boîte d'alerte, cliquez sur le X dans le coin supérieur droit :

Danger!
Le rouge indique souvent une situation dangereuse ou négative.

Pour créer le X qui ferme l'alerte, ajoutez un élément <span> avec la

classe w3-button et un événement onclick :
Exemple
<span onclick="[Link]='none'"
class="w3-button w3-display-topright">&times;</span>

Essayez-le vous-même »
Astuce : l'entité HTML × est l'icône préférée pour les boutons de fermeture
(plutôt que la lettre « X »).

Alertes arrondies
Utilisez les classes w3-round si vous souhaitez des coins arrondis :

Succès!
Ici, w3-round est utilisé.

Succès!
Ici, w3-round-large est utilisé.

Succès!
Ici, w3-round-xxlarge est utilisé.

Exemple
<div class="w3-panel w3-green w3-round">

Essayez-le vous-même »

Alerte comme une carte

Utilisez une classe w3-card si vous souhaitez que l'alerte s'affiche sous forme
de carte :

Avertissement!
Le jaune indique souvent quelque chose qui nécessite une attention
particulière.
Exemple
<div class="w3-panel w3-yellow w3-card-4">

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Tableaux [Link]
❮ PrécédentSuivant ❯

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Bo Nilsson 50

Micro Ross 35

Classes de tableaux [Link]

[Link] fournit les classes suivantes pour les tableaux :
 Classe Définit

table-w3 Conteneur pour une table HTML

w3-rayé Table rayée

bordure w3 Tableau bordé

bordé de w3 Lignes bordées

centré sur w3 Contenu du tableau centré

w3-survolable Table survolable

w3-table-tout Toutes les propriétés définies

Tableau de base
La classe w3-table est utilisée pour afficher un tableau de base :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Essayez-le vous-même »

PUBLICITÉ

Table à rayures
La classe w3-striped est utilisée pour ajouter des rayures zébrées à une
table :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table w3-striped">

Essayez-le vous-même »

Tableau bordé
La classe w3-bordered ajoute une bordure inférieure à chaque ligne
du tableau :

Prénom Nom de famille Points

 Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table w3-bordered">

Essayez-le vous-même »

Table à bordure rayée

Combinez la classe w3-striped et la classe w3-bordered pour créer un
tableau à bordure rayée :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table w3-striped w3-bordered">

Essayez-le vous-même »

Bordure autour d'une table

La classe w3-border est utilisée pour afficher une bordure autour d'un
tableau :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table w3-striped w3-border">

Essayez-le vous-même »
Astuce : la classe w3-border n'est pas réservée aux tableaux. Elle peut être
utilisée sur n'importe quel élément HTML !

Tout afficher
La classe w3-table-all combine toutes les classes ci-dessus :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all">

Essayez-le vous-même »

Inverser les rayures

Pour inverser les bandes (commencez par la couleur gris clair), ajoutez un
élément <thead> autour de la ligne d'en-tête du tableau. Vous devez
également définir une couleur à utiliser pour la ligne d'en-tête du tableau :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Bo Nilson 35

Exemple
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>

Essayez-le vous-même »

Centrer tout le contenu

La classe w3-centered centre le contenu du tableau :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all w3-centered">

Essayez-le vous-même »

Centrer une colonne

La classe w3-center centre le contenu d'une colonne :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>

Essayez-le vous-même »

Aligner une colonne à droite

La classe w3-right-align aligne à droite le contenu d'une colonne :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>

Essayez-le vous-même »

Table survolable
La classe w3-hoverable ajoute une couleur d'arrière-plan grise au
survol de la souris :

Prénom Nom de famille Points

Jill Forgeron 50
 Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all w3-hoverable">

Essayez-le vous-même »

Couleurs de survol
Si vous souhaitez une couleur de survol spécifique, ajoutez l'une des
classes de couleurs w3-hover- à chaque élément <tr> :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<tr class="w3-hover-green">

Essayez-le vous-même »

Combinaison des classes [Link]

De nombreuses classes [Link] peuvent être utilisées sur tous les éléments
HTML.

Par exemple : classes de bordure, classes de couleurs, classes de polices,

classes de cartes, etc.

En-tête de tableau coloré

Utilisez l'une des classes de couleurs w3 pour afficher une ligne colorée :
 Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<tr class="w3-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>

Essayez-le vous-même »

Tableau de couleurs
Utilisez l'une des classes de couleurs w3 pour afficher un tableau coloré :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table w3-blue">

Essayez-le vous-même »

Tableau réactif
La classe w3-responsive crée un tableau réactif. Le tableau défilera ensuite
horizontalement sur les petits écrans. Lors de l'affichage sur de grands
écrans, il n'y a aucune différence.

Redimensionnez l'écran pour voir l'effet sur le tableau ci-dessous :

 Prénom Nom de famille Points Points Points Points Points Points Points Poi

Jill Forgeron 5000 5000 5000 5000 5000 5000 5000 500

Veille Jackson 9400 9400 9400 9400 9400 9400 9400 940

Adam Johnson 6700 6700 6700 6700 6700 6700 6700 670

Exemple
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>

Essayez-le vous-même »

La table comme une carte

Utilisez une classe w3-card pour afficher un tableau sous forme de carte :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all w3-card-4">

Essayez-le vous-même »

Petite table
Utilisez la classe w3-tiny pour afficher un petit tableau :

Prénom Nom de famille Points

Jill Forgeron 50
 Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all w3-tiny">

Essayez-le vous-même »

Petite table
Utilisez la classe w3-small pour afficher un petit tableau :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67

Exemple
<table class="w3-table-all w3-small">

Essayez-le vous-même »

Grande Table
Utilisez la classe w3-large pour afficher un grand tableau :

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson 94

Adam Johnson 67
Exemple
<table class="w3-table-all w3-large">

Essayez-le vous-même »
Table XL
Utilisez la classe w3-xlarge pour afficher un tableau xlarge :

Prénom Nom de famille Points

Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67
Exemple
<table class="w3-table-all w3-xlarge">

Essayez-le vous-même »

Table XXL
Utilisez la classe w3-xxlarge pour afficher un tableau xxlarge :

Prénom Nom de Point

famille s
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67
Exemple
<table class="w3-table-all w3-xxlarge">

Essayez-le vous-même »

Table XXXLarge
Utilisez la classe w3-xxxlarge pour afficher un tableau xxxlarge :

Prénom Nom de Point

famille s
Jill Forgero 50
n
Veille Jackson 94
Adam Johnson 67
Exemple
<table class="w3-table-all w3-xxxlarge">

Essayez-le vous-même »

Table géante
Utilisez la classe w3-jumbo pour afficher un grand tableau géant :
 Prénom Nom de
famille
Jill Forgero
n
Veille Jackson
Adam Johnson
Exemple
<table class="w3-table-all w3-jumbo">

Essayez-le vous-même »

Listes [Link]
❮ PrécédentSuivant ❯
 ×

Mike
Web Designer
 ×

Soutien de Jill
  ×
Jane
Comptable

Liste de base
La classe w3-ul est utilisée pour afficher une liste de base :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Essayez-le vous-même »

Liste bordée
La classe w3-border ajoute une bordure autour de la liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

PUBLICITÉ

En-tête de la liste
Un exemple de la façon d'ajouter un élément d'en-tête à l'intérieur de
l'élément de liste :

 Noms
 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
 <li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Liste sous forme de carte

Les classes w3-card- number peuvent être utilisées pour afficher une liste
sous forme de carte :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Liste centrée
La classe w3-center peut être utilisée pour centrer les éléments d'une liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Essayez-le vous-même »

Liste colorée
Les classes de couleurs w3 peuvent être utilisées pour ajouter une couleur à
la liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Élément de liste coloré

Les classes de couleurs w3 peuvent être utilisées pour ajouter une couleur à
l'élément de la liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »
Liste survolable
La classe w3-hoverable ajoute une couleur d'arrière-plan grise à
chaque élément de la liste lors du survol de la souris :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Si vous souhaitez une couleur de survol spécifique, ajoutez l'une des

classes de couleurs w3-hover- à chaque élément <li> :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>

Essayez-le vous-même »

Élément de liste pouvant être fermé

Cliquez sur le « x » pour fermer/masquer un élément de la liste :

 Jill×
  Adam×

 Veille×

Exemple
<li class="w3-display-container">Jill
<span onclick="[Link]='none'"
class="w3-button w3-display-right">&times;</span>
</li>

Essayez-le vous-même »
Astuce : l'entité HTML × est l'icône préférée pour les boutons de fermeture
(plutôt que la lettre « X »).

Liste avec remplissage

Les classes w3-padding peuvent être utilisées pour ajouter du remplissage
aux éléments de la liste :

 Jill
 Veille

 Adam

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>

Essayez-le vous-même »

Liste des avatars

 ×

Mike
Web Designer
 ×

Soutien de Jill
  ×
Jane
Comptable

Exemple
<li class="w3-bar">
<span onclick="[Link]='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
<img src="img_avatar2.png" class="w3-bar-item w3-
circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span>
</div>
</li>

Essayez-le vous-même »
Astuce : vous en apprendrez plus sur les classes w3-bar dans nos
chapitres Barres [Link] et Navigation [Link] .
Largeur de la liste
Les listes ont une largeur de 100 % par défaut. Utilisez la propriété width pour
modifier cela.

Exemple
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

30% de largeur :

 Jill
 Adam

50% de largeur :

 Jill
 Adam

80% de largeur :

 Jill
 Adam

Petite liste
Utilisez la classe w3-tiny pour afficher une petite liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
 <li>Adam</li>
</ul>

Essayez-le vous-même »

Petite liste
Utilisez la classe w3-small pour afficher une petite liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Grande liste
Utilisez la classe w3-large pour afficher une grande liste :

 Jill
 Veille

 Adam

Exemple
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »
Liste XL
Utilisez la classe w3-xlarge pour afficher une liste extra large :

 Jill
 Veille
 Adam
Exemple
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Liste XXL
Utilisez la classe w3-xxlarge pour afficher une liste XXLarge :

 Jill
 Veille
 Adam
Exemple
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »
Liste XXXLarge
Utilisez la classe w3-xxxlarge pour afficher une liste XXXLarge :

 Jill
 Veille
 Adam
Exemple
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Liste Jumbo
Utilisez la classe w3-jumbo pour afficher une énorme liste « jumbo » :

 Jill
 Veille
 Adam
Exemple
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Essayez-le vous-même »

Images [Link]
❮ PrécédentSuivant ❯

Arrondi :

Cercle:
Bordé:

Texte:
Nature

Image arrondie
La classe w3-round ajoute des coins arrondis à une image :

Exemple
<img src="img_snowtops.jpg" class="w3-round" alt="Norway">

Essayez-le vous-même »

Image encerclée

La classe w3-circle donne à une image la forme d'un cercle :

Exemple
<img src="[Link]" class="w3-circle" alt="Alps">

Essayez-le vous-même »

PUBLICITÉ
Image bordée

La classe w3-border ajoute des bordures autour de l'image :

Exemple
<img src="[Link]" class="w3-border w3-padding" alt="Alps">

Essayez-le vous-même »

L'image comme carte

Enveloppez l'une des classes w3-card-* autour de l'élément <img> pour
l'afficher sous forme de carte (ajoutez des ombres) :
Simon
Le patron de tous les patrons

Exemple
<div class="w3-card-4">
<img src="img_avatar.png" alt="Person">
</div>

Essayez-le vous-même »

Texte de l'image
Positionnez le texte dans une image avec les classes w3-display- :

En haut à gauche

En haut à droite

En bas à gauche

En bas à droite
Gauche

Droite

Milieu

Haut Milieu

En bas au milieu

Exemple
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights">
<div class="w3-display-topleft w3-container">Top Left</div>
<div class="w3-display-topright w3-container">Top Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom
Middle</div>
</div>

Essayez-le vous-même »

Images réactives
Une image peut être configurée pour se redimensionner automatiquement
afin de s'adapter à la taille de son conteneur.

Si vous souhaitez que l'image soit réduite si nécessaire, mais jamais agrandie
au-delà de sa taille d'origine, utilisez la classe w3-image.

Exemple
<img src="img_lights.jpg" alt="Lights" class="w3-image">

Essayez-le vous-même »

Si vous souhaitez que l'image soit mise à l'échelle vers le haut et vers le bas
en fonction de la réactivité, définissez la propriété de largeur CSS sur 100 % :
Exemple
<img src="img_lights.jpg" alt="Lights" style="width:100%">

Essayez-le vous-même »

Si vous souhaitez restreindre une image réactive à une taille maximale,

utilisez la propriété max-width :

Exemple
<img src="img_lights.jpg" alt="Lights" style="width:100%;max-
width:400px">

Essayez-le vous-même »

Opacité
Les classes w3-opacity rendent les images transparentes :

Normale
w3-opacité-min

w3-opacité
 w3-opacité-max

Exemple
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">

Essayez-le vous-même »

Niveaux de gris
Les classes w3-grayscale ajoutent un effet de niveaux de gris à une image :
 Normale

w3-niveaux de gris-min
 w3-niveaux de gris

w3-niveaux-de-gris-max

Exemple
<img src="[Link]" alt="Table" class="w3-grayscale-min">
<img src="[Link]" alt="Table" class="w3-grayscale">
<img src="[Link]" alt="Table" class="w3-grayscale-max">

Essayez-le vous-même »
Remarque : les classes w3-grayscale ne sont pas prises en charge dans
IE 11 et les versions antérieures.
Sépia
Les classes w3-sepia ajoutent un effet sépia à une image :

Normale

w3-sépia-min
 w3-sépia

w3-sépia-max

Exemple
<img src="[Link]" alt="Table" class="w3-sepia-min">
<img src="[Link]" alt="Table" class="w3-sepia">
<img src="[Link]" alt="Table" class="w3-sepia-max">

Essayez-le vous-même »
Remarque : les classes w3-sepia ne sont pas prises en charge dans IE 11 et
les versions antérieures.
Effets de survol
Vous pouvez également ajouter des effets spéciaux au survol de la souris.
opacité du survol w3
w3-hover-niveaux de gris
w3-hover-sépia
Exemple
<img src="[Link]" alt="Einstein" class="w3-hover-opacity">
<img src="[Link]" alt="Einstein" class="w3-hover-grayscale">
<img src="[Link]" alt="Einstein" class="w3-hover-sepia">

Essayez-le vous-même »

Opacité désactivée
Ajouter de la transparence au survol :

Supprimer la transparence au survol :

La classe w3-hover-opacity ajoute de la transparence à l'image lors du
survol de la souris, et la classe w3-hover-opacity-off supprime la
transparence lors du survol de la souris.

Exemple
<img src="[Link]" class="w3-hover-opacity" alt="Alps">
<img src="[Link]" class="w3-opacity w3-hover-opacity-
off" alt="Alps">

Essayez-le vous-même »

Construire un album photo

Dans cet exemple, nous utilisons le système Responsive Grid de [Link] pour
créer un album photo qui s'affiche correctement sur tous les appareils. Vous
en apprendrez davantage à ce sujet plus tard.

Été 2015
5 Terre

Monterosso

Vernazza
Manarola

Corniglia

Riomaggiore

Exemple
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>

Essayez-le vous-même »

Entrée [Link]
❮ PrécédentSuivant ❯

Formulaire de saisie

Nom

E-mail

Sujet

Lait
Sucre
Citron (Désactivé)

Mâle
Femelle
Je ne sais pas (désactivé)

Envoyer ❯

Les meilleures étiquettes

Formulaire de saisie
Prénom
Nom de famille

Exemple
<form class="w3-container">

<label>First Name</label>
<input class="w3-input" type="text">

<label>Last Name</label>
<input class="w3-input" type="text">

</form>

Essayez-le vous-même »

Étiquettes du bas
Formulaire de saisie
Prénom
Nom de famille

Exemple
<form class="w3-container">

<input class="w3-input" type="text">

<label>First Name</label>

<input class="w3-input" type="text">

<label>Last Name</label>

</form>

Essayez-le vous-même »

PUBLICITÉ

Cartes d'entrée
En-tête
Prénom
Nom de famille

Exemple
<div class="w3-card-4">

<div class="w3-container w3-green">

<h2>Header</h2>
</div>

<form class="w3-container">

<label>First Name</label>
<input class="w3-input" type="text">

<label>Last Name</label>
<input class="w3-input" type="text">

</form>

</div>

Essayez-le vous-même »

Étiquettes colorées
Utilisez l’une des classes w3-text-color pour colorer vos étiquettes :

Prénom

Nom de famille

Registre

Exemple
<form class="w3-container">

<label class="w3-text-blue"><b>First Name</b></label>

<input class="w3-input w3-border" type="text">

<label class="w3-text-blue"><b>Last Name</b></label>

<input class="w3-input w3-border" type="text">

<button class="w3-btn w3-blue">Register</button>

</form>
Essayez-le vous-même »

Entrée bordée
Ajoutez la classe w3-border pour créer des entrées bordées :

Prénom

Nom de famille

Exemple
<input class="w3-input w3-border" type="text">

Essayez-le vous-même »

Bordures arrondies
Utilisez l’une des classes w3-round pour créer des bordures arrondies :

Prénom

Nom de famille

Exemple
<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">

Essayez-le vous-même »

Entrée sans bordure

La classe w3-input possède une bordure inférieure par défaut. Si vous
souhaitez une entrée sans bordure, ajoutez la classe w3-border-0 :

Prénom
Nom de famille

Exemple
<form class="w3-container w3-light-grey">
<label>First Name</label>
<input class="w3-input w3-border-0" type="text">

<label>Last Name</label>
<input class="w3-input w3-border-0" type="text">
</form>

Essayez-le vous-même »

Couleurs
N'hésitez pas à utiliser vos styles et couleurs préférés :

Formulaire de saisie
Prénom

Nom de famille

Registre

Exemple
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>

<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">

<label class="w3-text-teal"><b>Last Name</b></label>

<input class="w3-input w3-border w3-light-grey" type="text">

<button class="w3-btn w3-blue-grey">Register</button>

</form>

Essayez-le vous-même »
Entrées survolables
La classe de couleur w3-hover ajoute une couleur d'arrière-plan au champ
de saisie lors du survol de la souris :

Formulaire de saisie
Prénom:
Nom de famille:
Sujet:

Exemple
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input w3-border w3-hover-red" type="text">
<input class="w3-input w3-border w3-hover-blue" type="text">

Essayez-le vous-même »

Entrées animées
La classe w3-animate-input transforme la largeur d'un champ de saisie à
100 % lorsqu'il obtient le focus :

Exemple
<input class="w3-input w3-animate-
input" type="text" style="width:30%">

Essayez-le vous-même »

Cases à cocher
Lait

Sucre

Citron (Désactivé)

Exemple
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>

<input class="w3-check" type="checkbox">

<label>Sugar</label>

<input class="w3-check" type="checkbox" disabled>

<label>Lemon (Disabled)</label>

Essayez-le vous-même »

Boutons radio
Mâle

Femelle

Je ne sais pas (désactivé)

Exemple
<input class="w3-radio" type="radio" name="gender" value="male" c
hecked>
<label>Male</label>

<input class="w3-radio" type="radio" name="gender" valu

e="female">
<label>Female</label>

<input class="w3-radio" type="radio" name="gender" value="" disab

led>
<label>Don't know (Disabled)</label>

Essayez-le vous-même »

Sélectionner les options

Choisissez votre option Option 1 Option 2 Option 3
Exemple
<select class="w3-select" name="option">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

Essayez-le vous-même »

Menu de sélection bordé

Choisissez votre option Option 1 Option 2 Option 3
Exemple
<select class="w3-select w3-border" name="option">

Essayez-le vous-même »

Éléments de formulaire dans une

grille
Dans cet exemple, nous utilisons le système Responsive Grid de [Link] pour
que les entrées apparaissent sur la même ligne (sur des écrans plus petits,
elles s'empileront horizontalement avec une largeur de 100 %). Vous en
apprendrez davantage à ce sujet plus tard.

Exemple
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-
border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input class="w3-input w3-
border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input w3-
border" type="text" placeholder="Three">
</div>
</div>

Essayez-le vous-même »
Grille avec étiquettes
Prénom
Nom de famille
Exemple
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input class="w3-input w3-
border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last Name</label>
<input class="w3-input w3-
border" type="text" placeholder="Three">
</div>
</div>

Essayez-le vous-même »

Étiquettes d'icônes
Contactez-nous
Essayez-le vous-même »

❮ PrécédentSuivant ❯

Insignes [Link]
❮ PrécédentSuivant ❯

9 6 8 33 66 99
Classes de badges [Link]
[Link] ne fournit qu'une seule classe pour les badges :

Classe Définit

badge w3 Badge circulaire noir

Insignes
La classe w3-badge crée un badge circulaire. La couleur par défaut est
le noir.

Mises à jour9

Exemple
<p>Updates <span class="w3-badge">9</span></p>

Essayez-le vous-même »

Badges colorés
Utilisez une classe de couleur w3 pour changer la couleur d'un badge :

Nouvelles6Commentaires8

Exemple
<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>

Essayez-le vous-même »

PUBLICITÉ
Badges dans les boutons
La classe w3-badge peut être utilisée à l'intérieur d'autres éléments :

Bouton1

Bouton2

Exemple
<p><button class="w3-btn w3-black">Button
<span class="w3-badge w3-margin-left w3-white">1</span>
</button></p>

<p><button class="w3-btn w3-red">Button

<span class="w3-badge w3-margin-left">2</span>
</button></p>

Essayez-le vous-même »

Badges dans les listes

 1Jill
 2Veille

 3Adam

Exemple
<ul class="w3-ul">
<li><span class="w3-badge">1</span> Jill</li>
<li><span class="w3-badge">2</span> Eve</li>
<li><span class="w3-badge">3</span> Adam</li>
</ul>

Essayez-le vous-même »

La classe w3-right fait flotter un élément vers la droite.

Ceci est parfait pour les listes avec des badges :

 Jill1
 Veille2

 Adam3
Exemple
<ul class="w3-ul w3-border">
<li>Jill <span class="w3-badge w3-right w3-margin-
right">1</span></li>
<li>Eve <span class="w3-badge w3-right w3-margin-
right">2</span></li>
<li>Adam <span class="w3-badge w3-right w3-margin-
right">3</span></li>
</ul>

Essayez-le vous-même »

Badges dans les tableaux

Prénom Nom de famille Points

Jill Forgeron 50

Veille Jackson1 94

Adam Johnson2 67

Bo Nilsson 50

Micro Ross 35

Exemple
<tr>
<td>Eve</td>
<td>Jackson <span class="w3-badge">1</span></td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
 <td>Johnson <span class="w3-badge">2</span></td>
<td>67</td>
</tr>

Essayez-le vous-même »

Tailles des badges

Par défaut, un badge héritera de la taille de son conteneur.

Les classes de taille w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge,

w3-xxxlarge, w3-jumbo) peuvent être utilisées pour modifier la taille d'un
badge :

6 6 6

66 66 66

66 66
Vous souhaiterez peut-être ajouter un rembourrage supplémentaire aux
grands badges :

Exemple
<span class="w3-badge w3-jumbo w3-red">66</span>
<span class="w3-badge w3-jumbo w3-red w3-padding">66</span>

Essayez-le vous-même »

Insignes UTF-8
Étant donné que HTML5 prend en charge le jeu de caractères UTF-8, vous
pouvez utiliser Dingbats pour les badges à un seul chiffre.

❶❷❸❹❺➅➆➇➈➉
❶❷❸❹❺➅➆➇➈➉
Exemple
<div class="w3-xxlarge">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786;
&#x2787; &#x2788; &#x2789;
</div>

<div class="w3-xxlarge w3-text-red">

&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786;
&#x2787; &#x2788; &#x2789;
</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Balises [Link] (étiquettes

et signes)
❮ PrécédentSuivant ❯

Mots clés : Fait Nouveau! Plus tard !

Les tags comme signes : Promenade Falcon

Ridge ARRÊT! ATTENTION!

Classes de balises [Link]

[Link] fournit une classe pour les balises, les étiquettes et les signes :

Classe Définit

balise w3 Étiquette rectangulaire noire

Étiquettes, étiquettes et signes
Dans le monde [Link], il n'y a pas de réelle différence entre une balise, une
étiquette ou un signe.

Les balises sont rectangulaires

La classe w3-tag crée une balise rectangulaire (étiquette ou signe). La
couleur par défaut est le noir :

Statut:Fait

Exemple
<p>Status: <span class="w3-tag">Done</span></p>

Essayez-le vous-même »

Étiquettes colorées
Utilisez une classe de couleur w3 pour changer la couleur d'une balise :

Nouveau!

Plus tard !

Exemple
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>

Essayez-le vous-même »

PUBLICITÉ

Tailles des étiquettes

Par défaut, une balise héritera de la taille de son conteneur.

Les classes de taille w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge,

w3-xxxlarge, w3-jumbo) peuvent être utilisées pour modifier la taille d'une
balise :

6 6 6

66 66 66

66 66
Vous souhaiterez peut-être ajouter un rembourrage supplémentaire aux
grandes balises :

Exemple
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>

Essayez-le vous-même »

Étiquettes de lettres
UN Tu G Tu S T
Exemple
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>

Essayez-le vous-même »

S UN L E
Exemple
<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>

Essayez-le vous-même »

Signes
Les panneaux ne sont rien d’autre que de grandes étiquettes.

Zoo de Londres
Exemple
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>

Essayez-le vous-même »

Panneaux de signalisation routière

Promenade Falcon Ridge
Exemple
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div class="w3-tag w3-round w3-green w3-border w3-border-
white">
Falcon Ridge Parkway
</div>
</div>

Essayez-le vous-même »

Grands panneaux
Les classes de taille w3 peuvent être utilisées pour afficher de grands
panneaux :
EN CAS D'
URGENCE :
COUREZ COMME UN ENFER !
Exemple
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>

Essayez-le vous-même »

49 ,99
Exemple
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>

Essayez-le vous-même »

Panneaux arrondis
Les classes de taille w3-round- peuvent être utilisées pour ajouter des coins
arrondis à un panneau :

NE PAS
RESPIRER
SOUS L'EAU
Exemple
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>

Essayez-le vous-même »
Balises rotatives
Utilisez la propriété de transformation CSS standard pour faire pivoter un
panneau :

ARRÊT
Exemple
<span class="w3-tag w3-xlarge w3-padding w3-
red" style="transform:rotate(-5deg)">
STOP
</span>

Essayez-le vous-même »
Remarque : transform:rotate() ne fonctionne pas dans IE 9 et les versions
antérieures.

Balises tournantes
La classe w3-spin peut être utilisée pour permettre à un panneau de
tourner à 360 degrés :

ARRÊT
Exemple
<span class="w3-tag w3-spin w3-large">
STOP
</span>

Essayez-le vous-même »

Icônes [Link]
❮ PrécédentSuivant ❯
Bibliothèques d'icônes
Avec [Link], vous pouvez utiliser la bibliothèque d'icônes que vous aimez,
telles que :

 Icônes de Font Awesome

 Icônes de Google Material Design
 Icônes Bootstrap

Utilisation d'une bibliothèque

d'icônes
Pour insérer une icône :

1. Incluez la bibliothèque d'icônes d'un CDN (Content Delivery Network)

dans la section <head>.
2. Ajoutez le nom de la classe d’icône à n’importe quel élément HTML en
ligne.

Astuce : les éléments <i> et <span> sont largement utilisés pour ajouter
des icônes.

Pour contrôler la taille de l'icône, modifiez la propriété font-size de l'icône ou

utilisez l'une des classes w3- size :

 w3-minuscule
 w3-petit
 w3-grand
 w3-xxlarge
 w3-xxxlarge
 w3-jumbo

Quelques icônes Font Awesome

fa fa-maison

barres fa fa

fa fa-flèche-gauche
fa fa-flèche-droite

fa fa-recherche

fa fa-fermer

fa fa-rafraîchir

fa fa-poubelle

fa fa-mâle

fa fa-voiture

camion fa fa

fa fa-avion

Exemple
<!DOCTYPE html>
<html>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
.css">
<link rel="stylesheet" href="[Link]
bs/font-awesome/4.7.0/css/[Link]">
<body>

<i class="fa fa-home"></i>

<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>

</body>
</html>

Essayez-le vous-même »
Pour une liste complète des icônes : Visitez notre référence d'icônes

PUBLICITÉ
Quelques icônes de Google Material
Design
maison
maison

menu
menu

flèche_retour
flèche_retour

flèche vers l'avant

flèche vers l'avant

recherche
recherche

fermer
fermer

rafraîchir
rafraîchir

supprimer
supprimer

personne
personne

directions_voiture
directions_voiture

expédition_locale
expédition_locale
aéroport_local
aéroport_local

Exemple
<!DOCTYPE html>
<html>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
.css">
<link rel="stylesheet" href="[Link]
family=Material+Icons">
<body>

<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>

</body>
</html>

Essayez-le vous-même »

Quelques icônes Bootstrap

maison

menu-hamburger

flèche_retour

flèche vers l'avant

recherche

retirer

rafraîchir

poubelle
utilisateur

déposer

imprimer

avion

Exemple
<!DOCTYPE html>
<html>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
.css">
<link rel="stylesheet" href="[Link]
strap/3.3.6/css/[Link]">
<body>

<i class="glyphicon glyphicon-home"></i>

<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>

</body>
</html>

Essayez-le vous-même »

Réactivité intégrée [Link]

❮ PrécédentSuivant ❯

[Link] inclut un système de grille réactif et mobile pour gérer la mise en

page :

1/2

1/2

1/3

1/3
 1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

3/4

1/4

1/4

1/4

1/2

1/4

1/2

1/4

50px

repos

1/4

repos

100 px
 45px

repos

Classes réactives [Link]

Le système de grille de [Link] est réactif et les colonnes se réorganiseront
automatiquement en fonction de la taille de l'écran :

Classe Description

w3-moitié Occupe la moitié de la fenêtre (sur les écrans

moyens et grands)

w3-tiers Occupe 1/3 de la fenêtre (sur les écrans

moyens et grands)

w3-deux-tiers Occupe 2/3 de la fenêtre (sur les écrans

moyens et grands)

w3-trimestre Occupe 1/4 de la fenêtre (sur les écrans

moyens et grands)

w3-trois-quarts Occupe les 3/4 de la fenêtre (sur les écrans

moyens et grands)

w3-rest Occupe le reste de la largeur de la colonne

w3-col Définit une colonne dans une grille réactive à

12 colonnes
 w3-mobile Ajoute une réactivité mobile à une cellule
(colonne).
Affiche les éléments sous forme d'éléments de
bloc sur les appareils mobiles.

Les classes réactives ci-dessus doivent être placées dans une classe w3-
row (ou une classe w3-row-padding ) pour être entièrement réactives.

Classe Description

rangée w3 Conteneur pour classes réactives,

sans remplissage

Rembourrage de rangée Conteneur pour classes réactives,

w3 avec remplissage gauche et droit de
8 px

w3-contenu Conteneur pour contenu centré de

taille fixe

w3-masquer-petit Masque le contenu sur les petits

écrans (moins de 601 px)

w3-masquer-medium Masque le contenu sur les écrans

moyens

w3-masquer-large Masque le contenu sur les grands

écrans (plus de 992 px)
 l1 - l12 Tailles réactives pour les grands
écrans

m1 - m12 Tailles réactives pour écrans moyens

s1 - s12 Tailles réactives pour les petits

écrans

PUBLICITÉ

La classe w3-half
La largeur de la classe w3-half est la moitié de l'élément parent
(style="width:50%").

Sur les écrans inférieurs à 601 pixels, il est redimensionné à 100 %.

w3-moitié
w3-moitié
Exemple
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>

Essayez-le vous-même »
La classe w3-third
La largeur de la classe w3-third est 1/3 de l'élément parent
(style="width:33.33%").

Sur les écrans inférieurs à 601 pixels, il est redimensionné à 100 %.

w3-tiers
w3-tiers
w3-tiers
Exemple
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>

Essayez-le vous-même »

La classe w3-twothird
La largeur de la classe w3-twothird est 2/3 de l'élément parent
(style="width:66.66%").

Sur les écrans inférieurs à 601 pixels, il est redimensionné à 100 %.

w3-deux-tiers
w3-tiers
Exemple
<div class="w3-row">
<div class="w3-green w3-container w3-twothird">
 <h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>

Essayez-le vous-même »

La classe w3-trimestre
La largeur de la classe w3-quarter est 1/4 de l'élément parent
(style="width:25%").

Sur les écrans inférieurs à 601 pixels, il est redimensionné à 100 %.

w3-trimestre
w3-trimestre
w3-trimestre
w3-trimestre
Exemple
<div class="w3-row">
<div class="w3-green w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>

Essayez-le vous-même »

La classe w3-trois-quarts
La largeur de la classe w3-threequarter est 3/4 de l'élément parent
(style="width:75%").

Sur les écrans inférieurs à 601 pixels, il est redimensionné à 100 %.

w3-trois-quarts
w3-trimestre
Exemple
<div class="w3-row">
<div class="w3-green w3-container w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>

Essayez-le vous-même »

Combinaisons
w3-trimestre
w3-moitié
w3-trimestre

w3-trimestre
w3-trimestre
w3-moitié

w3-moitié
w3-trimestre
w3-trimestre
w3-tiers
w3-deux-tiers

w3-trimestre
w3-trois-quarts

Lignes imbriquées
Exemple : w3-half À l'intérieur de w3-half
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
</div>

Essayez-le vous-même »
Colonnes utilisant Rest
La classe w3-col définit une colonne dans une grille réactive de 12 colonnes.

La classe w3-rest occupera le reste de la largeur :

Je mesure 150px

Je suis le reste

Exemple
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I am 150px</p></div>
<div class="w3-rest w3-green"><p>I am the rest</p></div>
</div>

Essayez-le vous-même »

Colonnes utilisant le pourcentage

Vous pouvez également utiliser la propriété CSS width pour définir la largeur
en pourcentage :

20%

60%

20%

Exemple
<div class="w3-row">
<div class="w3-col" style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div class="w3-col" style="width:20%"><p>20%</p></div>
</div>

Essayez-le vous-même »

La classe w3-content
La classe w3-content définit un conteneur pour un contenu centré de taille
fixe. Utilisez la propriété CSS max-width pour remplacer la largeur par défaut
(980 px).
Exemple
<body class="w3-content" style="max-width:500px">

page content...

</body>

Essayez-le vous-même »

w3-row contre w3-row-padding

La classe w3-row définit un conteneur sans remplissage, tandis que la
classe w3-row-padding ajoute un remplissage gauche et droit de 8 px à
chaque colonne :

w3-rangée:

w3-tiers
w3-tiers
w3-tiers
w3-ligne-rembourrage :

w3-tiers
w3-tiers
w3-tiers
w3-rangée:
w3-ligne-rembourrage :
Exemple
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

Essayez-le vous-même »

Rangées rembourrées extensibles

La classe w3-stretch supprime les marges droite et gauche d'un élément.
Cette classe est souvent utilisée pour étirer une ligne rembourrée :

Un exemple avec w3-stretch :

Un exemple sans w3-stretch :
Exemple
<div class="w3-row-padding w3-section w3-stretch">
<div class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_mountains_wide.jpg">
</div>
</div>

Essayez-le vous-même »

Afficher/Masquer réactif
Les classes w3-hide-small , w3-hide-medium et w3-hide-large masquent
des éléments sur des tailles d'écran spécifiques.

Remarque : redimensionnez la fenêtre du navigateur pour comprendre son

fonctionnement :

w3-hide-small sera masqué sur les petits écrans (téléphones)

w3-hide-medium sera masqué sur les écrans moyens (tablettes)

Exemple
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will be hidden on small screens (phones)</p>
</div>

<div class="w3-container w3-hide-medium w3-green">

<p>w3-hide-medium will be hidden on medium screens
(tablets)</p>
</div>

<div class="w3-container w3-hide-large w3-blue">

<p>w3-hide-large will be hidden on large screens
(laptops/desktop)</p>
</div>

Essayez-le vous-même »

La classe w3-mobile
La classe w3-mobile ajoute une réactivité mobile d'abord à n'importe quel
élément.

Il ajoute display:block et width:100% à un élément sur les écrans dont la

largeur est inférieure à 600 px.

Exemple
<a class="w3-button w3-mobile" href="#">Link</a>

Essayez-le vous-même »

Résolutions d'écran
La réactivité intégrée de [Link] utilise la taille DP d'un écran.

[Link] traitera un iPhone 6 avec une résolution de 750 x 1334 pixels comme
un petit écran de 375 x 667 pixels DP.

Les petits écrans ont moins de 601 pixels DP, les écrans moyens ont moins de
993 pixels DP.
Vous trouverez ci-dessous une liste des résolutions d'appareils typiques et
des tailles DP signalées :

Iphone 4
Résolution
640 x 960

DP
320 x 480

Iphone 5
Résolution
640 x 1136

DP
320 x 528

Iphone 6
Résolution
750 x 1334

DP
375 x 667

Iphone 6s
Résolution
1080 x 1920

DP
414 x 736

Galaxy S6
Résolution
1440 x 2560

DP
360 x 640

Note 4
Résolution
1440 x 2560
 DP
400 x 853

Nexus 6
Résolution
1440 x 2560

DP
411 x 731

iPad Mini
Résolution
768 x 1024

DP
768 x 1024

iPad
Résolution
1536 x 2048

DP
768 x 1024

Ordinateur portable typique

Résolution
1366 x 768

DP
1366 x 768

Bureau typique
Résolution
1920 x 1080

DP
1920 x 1080

Grille fluide réactive à 12 colonnes

[Link] prend également en charge une grille fluide réactive avancée de 12
colonnes.

Redimensionnez la page pour voir l’effet !

1
2
3
4
5
6
7
8
9
10
11
12

Cette partie occupera 12 colonnes sur un petit écran, 4 sur un écran moyen
et 3 sur un grand écran.

Cette partie occupera 12 colonnes sur un petit écran, 8 sur un écran moyen
et 9 sur un grand écran.

1
2
3
4
5
6
7
8
9
10
11
12
Vous en apprendrez beaucoup plus sur la grille fluide dans un chapitre
ultérieur.

Mise en page [Link]

❮ PrécédentSuivant ❯

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Classes de mise en page [Link]

Classe Description

rangée de cellules Récipient pour cellules (colonnes).

w3

cellule w3 Cellule de mise en page (colonne).

w3-cellule-haut Aligne le contenu en haut d'une cellule

(colonne).

w3-cellule-milieu Aligne le contenu au milieu vertical d'une

cellule (colonne).

w3-cellule-bas Aligne le contenu au bas d'une cellule

(colonne).

w3-mobile Ajoute une réactivité mobile à une cellule

(colonne).
Affiche les éléments sous forme d'éléments
de bloc sur les appareils mobiles.
Éléments de bloc HTML
À l’origine, les éléments de bloc HTML (comme les éléments <div>)
s’affichent sous forme de blocs verticaux :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-container w3-red">
<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green">

<p>Hello [Link] Layout.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Disposition des cellules

La classe w3-cell redéfinit les éléments de bloc pour les afficher
horizontalement (comme les cellules de tableau) :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">

<p>Hello [Link] Layout.</p>
</div>

Essayez-le vous-même »
Conteneur de mise en page
La ligne w3-cell est un conteneur pour les cellules (colonnes).

La largeur du conteneur w3-cell-row définit la largeur totale de toutes les

cellules contenues.

La largeur par défaut est de 100 % :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-cell-row">

<div class="w3-container w3-red w3-cell">

<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">

<p>Hello [Link] Layout.</p>
</div>

</div>

Essayez-le vous-même »

Si vous modifiez la largeur du conteneur de cellules, cela réduira la largeur

totale des cellules contenues :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-cell-row" style="width:75%">

<div class="w3-container w3-red w3-cell">

<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">

<p>Hello [Link] Layout.</p>
</div>
</div>

Essayez-le vous-même »

Les cellules de disposition s'ajustent

automatiquement
La classe w3-cell dispose d'un très bon standard d'auto-ajustement intégré.
Les éléments côte à côte s'ajusteront automatiquement à la largeur
nécessaire :

Bonjour [Link] en page CSS.

Bonjour mise en page [Link]. Bonjour mise en page [Link].

Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">

<p>Hello [Link] Layout. Hello [Link] Layout.</p>
</div>

Essayez-le vous-même »

Les cellules de disposition s'ajustent

à une hauteur égale
Les éléments w3-cell côte à côte s'ajusteront également automatiquement
à une hauteur égale :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">

<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
</div>

Essayez-le vous-même »

Mise en page réactive

La classe w3-mobile ajoute une réactivité mobile d'abord à tout élément
HTML.

Utilisé avec w3-cell, il affichera les colonnes de mise en page verticalement

sur les petits écrans/téléphones portables et horizontalement sur les écrans
moyens/grands.

Sur les écrans moyens et grands :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Sur les petits écrans :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-container w3-red w3-cell w3-mobile">
<p>Hello [Link] Layout.</p>
</div>
<div class="w3-container w3-green w3-cell w3-mobile">
<p>Hello [Link] Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello [Link] Layout.</p>
</div>

Essayez-le vous-même »

Alignement facile
La classe w3-cell permet d'aligner très facilement du texte.

Il existe 3 classes d'alignement différentes :

 w3-cell-top (par défaut)

 w3-cellule-milieu

 w3-cellule-bas

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">

<p>Hello [Link] Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>Hello [Link] Layout.</p>
</div>

Essayez-le vous-même »

La classe w3-cell-row étire les éléments pour s'adapter à la largeur de la

page :

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Bonjour [Link] en page CSS.

Exemple
<div class="w3-cell-row">

<div class="w3-container w3-red w3-cell">

<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">

<p>Hello [Link] Layout.</p>
</div>

<div class="w3-container w3-blue w3-cell w3-cell-bottom">

<p>Hello [Link] Layout.</p>
</div>

</div>

Essayez-le vous-même »

❮ PrécédentSuivant ❯
Animations [Link]
❮ PrécédentSuivant ❯

Haut
Bas
Gauche
Droite
Fondu en entrée
Zoom
Rotation

L'animation est amusante !

Classes d'animation [Link]

[Link] fournit les classes suivantes pour les animations :

Classe Définit

w3-animate-haut Diapositives dans un élément depuis le haut

(-300 px à 0)

w3-animate-bas Diapositives dans un élément depuis le bas (-

300 px à 0)

w3-animate-gauche Diapositives dans un élément depuis la

gauche (-300px à 0)

w3-animate-droite Diapositives dans un élément depuis la droite

(-300px à 0)
 w3-animate-opacité Anime l'opacité d'un élément de 0 à 1 en 0,8
seconde

w3-animate-zoom Anime un élément de 0 à 100 % de sa taille

w3-animate-fondu Anime l'opacité d'un élément de 0 à 1 et de 1

à 0 (fondu entrant + fondu sortant)

w3-tourner Fait tourner un élément à 360 degrés

Animer le haut
La classe w3-animate-top fait glisser un élément depuis le haut (de -300 px
à 0) :

Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>

Essayez-le vous-même »

PUBLICITÉ

Animer le bas
La classe w3-animate-bottom fait glisser un élément depuis le bas (de -
300 px à 0) :

Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>

Essayez-le vous-même »

Animer la gauche
La classe w3-animate-left fait glisser un élément de gauche à droite (-
300 px à 0) :

Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>

Essayez-le vous-même »

Animer à droite
La classe w3-animate-right fait glisser un élément depuis la droite (-300 px
à 0) :

Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>

Essayez-le vous-même »

Éléments en fondu
La classe w3-animate-opacity anime l'opacité d'un élément de 0 à 1 en 0,8
seconde.

Fondu dans un élément avec la classe w3-animate-opacity :

Exemple
<div class="w3-animate-opacity">..</div>

Essayez-le vous-même »

Zoom sur les éléments

La classe w3-animate-zoom anime un élément de 0 à 100 % de sa taille.

Zoomez sur un élément avec la classe w3-animate-zoom :

Exemple
<div class="w3-animate-zoom">..</div>

Essayez-le vous-même »

Éléments de rotation
La classe w3-spin fait tourner un élément à 360 degrés :

Exemple
<div class="w3-spin">..</div>

Essayez-le vous-même »

Décoloration infinie
La classe w3-animate-fading fait apparaître et disparaître un élément
toutes les 10 secondes (en continu) :

Animer un fondu entrant et sortant

Exemple
<div class="w3-animate-fading">..</div>

Essayez-le vous-même »
Fondu total
Exemple
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">

Essayez-le vous-même »

Effets [Link]
❮ PrécédentSuivant ❯

Normale
 w3-opacité

w3-niveaux-de-gris-max
 w3-sépia-max

Classes d'effets [Link]

[Link] fournit les classes d’effets suivantes :

Classe Définit

w3-opacité Ajoute de l'opacité/transparence à un

élément (opacité : 0,6)

w3-opacité-min Ajoute de l'opacité/transparence à un

élément (opacité : 0,75)

w3-opacité-max Ajoute de l'opacité/transparence à un

élément (opacité : 0,25)

w3-niveaux de gris Ajoute un effet de niveaux de gris à un

élément (niveaux de gris : 75 %)
 w3-niveaux de gris-min Ajoute un effet de niveaux de gris à un
élément (niveaux de gris : 50 %)

w3-niveaux-de-gris-max Ajoute un effet de niveaux de gris à un

élément (niveaux de gris : 100 %)

w3-sépia Ajoute un effet sépia à un élément

(sépia : 75 %)

w3-sépia-min Ajoute un effet sépia à un élément

(sépia : 50 %)

w3-sépia-max Ajoute un effet sépia à un élément

(sépia : 100 %)

opacité du survol w3 Ajoute de la transparence à un élément

lors du survol (opacité : 0,6)

w3-hover-niveaux de gris Ajoute un effet de niveaux de gris à un

élément lors du survol (niveaux de gris :
100 %)

w3-hover-sépia Ajoute un effet sépia à un élément lors

du survol

Opacité
Les classes w3-opacity ajoutent de la transparence à un élément :
 Normale

w3-opacité-min
 w3-opacité

w3-opacité-max

Exemple
<img src="[Link]" class="w3-opacity-min">
<img src="[Link]" class="w3-opacity">
<img src="[Link]" class="w3-opacity-max">

Essayez-le vous-même »

PUBLICITÉ
Niveaux de gris
Les classes w3-grayscale ajoutent un effet de niveaux de gris à un élément :

Normale

w3-niveaux de gris-min
 w3-niveaux de gris

w3-niveaux-de-gris-max

Exemple
<img src="[Link]" class="w3-grayscale-min">
<img src="[Link]" class="w3-grayscale">
<img src="[Link]" class="w3-grayscale-max">

Essayez-le vous-même »
Remarque : les classes w3-grayscale ne sont pas prises en charge dans
IE 11 et les versions antérieures.
Sépia
Les classes w3-sepia ajoutent un effet sépia à un élément :

Normale

w3-sépia-min
 w3-sépia

w3-sépia-max

Exemple
<img src="[Link]" class="w3-sepia-min">
<img src="[Link]" class="w3-sepia">
<img src="[Link]" class="w3-sepia-max">

Essayez-le vous-même »
Remarque : les classes w3-sepia ne sont pas prises en charge dans IE 11 et
les versions antérieures.
Effets de survol
Vous pouvez également ajouter des effets spéciaux au survol de la souris.
opacité du survol w3
w3-hover-niveaux de gris
w3-hover-sépia
Exemple
<img src="[Link]" class="w3-hover-opacity">
<img src="[Link]" class="w3-hover-grayscale">
<img src="[Link]" class="w3-hover-sepia">

Essayez-le vous-même »

Couleur d'opacité au survol

Vous pouvez également combiner n'importe quelle classe w3-hover-color
avec w3-hover-opacity pour créer une couleur d'arrière-plan légèrement «
plus claire » au survol :

w3-hover-rouge

w3-hover-red avec w3-hover-opacity

Exemple
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>

Essayez-le vous-même »

Barres [Link]
❮ PrécédentSuivant ❯

Londres
Paris
Tokyo
Londres
Paris
Tokyo
Londres
Paris
Tokyo
Londres
Paris
Tokyo
Barres horizontales
Les barres horizontales sont des éléments de conception Web courants :

Londres
Paris
Tokyo

La classe w3-bar est utilisée pour styliser une barre horizontale :

Exemple
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>

Essayez-le vous-même »

Le but de la classe w3-bar-item est de fournir un espacement, un

remplissage et un positionnement corrects.

Barres verticales
Les barres verticales (barres latérales) sont également courantes dans la
conception Web :

Londres
Paris
Tokyo

La classe w3-bar-block est utilisée pour styliser une barre verticale :

Exemple
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>

Essayez-le vous-même »
 PUBLICITÉ

Couleurs des barres

Vous pouvez utiliser n'importe quelle couleur pour styliser une barre :

Londres
Paris
Tokyo
Londres
Paris
Tokyo
Londres
Paris
Tokyo
Londres
Paris
Tokyo
Exemple
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>

Essayez-le vous-même »

Couleurs de survol
Vous pouvez utiliser n’importe quelle couleur de survol pour styliser une
barre :

Passez la souris sur les éléments de la barre pour voir l'effet :

Londres
Paris
Tokyo

Londres
Paris
Tokyo
Exemple
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>

Essayez-le vous-même »

Liens de la barre
Fournir une navigation est une utilisation typique des barres :

LondresParisTokyo

LondresParisTokyo
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>

Essayez-le vous-même »

Boutons de la barre
La classe w3-button est parfaite pour styliser les liens dans une barre.

Passez la souris sur les éléments de la barre pour voir l'effet :

Londres
Paris
Tokyo

Londres
Paris
Tokyo
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
 <a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>

Essayez-le vous-même »

Barre réactive
La classe w3-mobile est parfaite pour rendre les articles de bar réactifs.

Redimensionnez la fenêtre pour voir l'effet :

Londres
Paris
Tokyo
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>

Essayez-le vous-même »

Éléments de barre alignés à droite

La classe w3-right est parfaite pour aligner les éléments de la barre à
droite :

Londres
Paris
Tokyo
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>

Essayez-le vous-même »
Listes déroulantes [Link]
❮ PrécédentSuivant ❯

Survolez-moi !

Classes déroulantes [Link]

[Link] fournit les classes déroulantes suivantes :

Classe Définit

w3-dropdown-hover Un élément déroulant survolable

w3-contenu-déroulant La partie déroulante à afficher

w3-dropdown-clic Un élément déroulant cliquable

Éléments déroulants
La classe w3-dropdown-hover définit un élément déroulant survolable.

La classe w3-dropdown-content définit le contenu déroulant à afficher.

Exemple
<div class="w3-dropdown-hover">
<button class="w3-button">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
 <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>

Essayez-le vous-même »

L'élément survolable et l'élément de contenu déroulant peuvent être

n'importe quel élément HTML.

Dans l'exemple ci-dessus, l'élément hover était un <button> et le contenu

déroulant un <div>.

Dans l'exemple suivant, l'élément hover est un <p> et le contenu du menu

déroulant est un <span> :

Exemple
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>

Essayez-le vous-même »

PUBLICITÉ

Menu déroulant
La classe w3-dropdown-hover est parfaite pour créer des barres de
navigation avec des menus déroulants :

MaisonLien 1
Dérouler
Exemple
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
 </div>
</div>

Essayez-le vous-même »
Remarque : vous en apprendrez plus sur les barres de navigation plus tard
dans ce didacticiel.

Listes déroulantes cliquables

La classe w3-dropdown-click crée un élément déroulant cliquable.

Avec cette classe, la liste déroulante est ouverte par JavaScript :

Cliquez sur moi

Exemple
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click
Me!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-
border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>

<script>
function myFunction() {
var x = [Link]("Demo");
if ([Link]("w3-show") == -1) {
[Link] += " w3-show";
} else {
[Link] = [Link](" w3-show", "");
}
}
</script>

Essayez-le vous-même »

Menus déroulants d'images

Déplacez la souris sur l'image :
Exemple
<div class="w3-dropdown-hover">
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
<div class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg" alt="Norway" style="width:100%">
</div>
</div>

Essayez-le vous-même »

Listes déroulantes des cartes

Déplacez la souris sur l'une des villes ci-dessous :

Londres

Tokyo
Exemple
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content w3-card-4" style="width:250px">
<img src="img_london.jpg" alt="London" style="width:100%">
<div class="w3-container">
<p>London is the capital city of England.</p>
<p>It is the most populous city in the UK.</p>
 </div>
</div>
</div>

Essayez-le vous-même »

Menu déroulant animé

Utilisez l'une des classes w3-animate pour faire disparaître, zoomer ou faire
glisser le contenu du menu déroulant :

Cliquez sur moi

Exemple
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button">Click
Me</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-
animate-zoom">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>

Essayez-le vous-même »

Menu déroulant aligné à droite

Utilisez la classe w3-right pour faire flotter le menu déroulant vers la droite.
Utilisez CSS pour positionner le contenu du menu déroulant ( right:0 fera
défiler le menu déroulant de droite à gauche au lieu de gauche à droite) :

Survolez-moi
Exemple
<div class="w3-dropdown-hover w3-right">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-
border" style="right:0">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
 </div>
</div>

Essayez-le vous-même »

Accordéons [Link]
❮ PrécédentSuivant ❯

Cliquez sur les boutons « Ouvrir la section » ci-dessous pour voir comment
fonctionnent les accordéons :

Ouvrir la section 1Ouvrir la section 2Ouvrir la section 3

Accordéon
Un accordéon est utilisé pour afficher (et masquer) du contenu HTML.

Utilisez la classe w3-hide pour masquer le contenu de l'accordéon.

Utilisez n’importe quel type de bouton pour ouvrir et fermer le contenu :

Exemple
<button onclick="myFunction('Demo1')" class="w3-button w3-block
w3-left-align">
Open Section 1</button>

<div id="Demo1" class="w3-container w3-hide">

<p>Some text..</p>
</div>

<script>
function myFunction(id) {
var x = [Link](id);
if ([Link]("w3-show") == -1) {
[Link] += " w3-show";
} else {
[Link] = [Link](" w3-show", "");
}
}
</script>
Essayez-le vous-même »

L'élément utilisé pour ouvrir l'accordéon ainsi que le contenu de l'accordéon

peuvent être n'importe quel élément HTML.

Accordéon vs. Menu déroulant

Ce tableau montre la différence entre un accordéon et une liste déroulante :

Accordéon Dérouler

Le contenu pousse le contenu de la page vers le Le contenu

bas se superpose
au contenu
existant de la
page

Le contenu est souvent 100 % large Le contenu

mesure
160 px de
large (par
défaut)

Souvent utilisé pour ouvrir plusieurs sections Souvent

utilisé pour
ouvrir une
section

Accordéons
Accordéon 1 Accordéon 2

Menus déroulants
Dérouler

PUBLICITÉ
Boutons d'accordéon
Vous pouvez utiliser n'importe quel élément HTML pour ouvrir le contenu de
l'accordéon. Nous préférons un bouton avec une classe w3-block , pour
couvrir toute la largeur de la page (100% de largeur).

N'oubliez pas que les boutons dans [Link] sont centrés par défaut. Utilisez
la classe w3-left-align si vous souhaitez qu'ils soient alignés à gauche.
Cependant, vous n'êtes pas obligé de suivre notre approche : un accordéon
sera beau dans les deux cas :

Bouton normalAligné à gauche et pleine largeurCentré et pleine largeur

Exemple
<button onclick="myFunc('Demo1')" class="w3-button">
Normal button</button>

<div id="Demo1" class="w3-hide">

<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-

left-align w3-green">
Left aligned and full-width</button>

<div id="Demo2" class="w3-hide">

<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">

Centered and full-width</button>

<div id="Demo3" class="w3-hide w3-center">

<p>Centered content as well!</p>
</div>

Essayez-le vous-même »

Boutons d'accordéon actifs

Utilisez JavaScript pour mettre en évidence les accordéons ouverts (cliqués) :

Ouvrir la section 1Ouvrir la section 2

Exemple
// Add the w3-red class to all opened accordions
var x = [Link](id);
if ([Link]("w3-show") == -1) {
[Link] += " w3-show";
[Link] += " w3-red";
} else {
[Link] = [Link]("w3-show", "");
[Link] =
[Link]("w3-red", "");
}

Essayez-le vous-même »

Largeur de l'accordéon
Par défaut, la largeur du bloc est de 100 %. Pour contourner ce problème,
modifiez la propriété CSS width du conteneur d'accordéon :

25%
50%
75%
Par défaut (100 %)
Exemple
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')" class="w3-button w3-
block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>

Essayez-le vous-même »

Contenu de l'accordéon
Accordéon avec liens :
Accordéon
Lien 1Lien 2Lien 3
Exemple
<button onclick="myFunction('Demo1')" class="w3-button w3-block
w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">

<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 3</a>
</div>

Essayez-le vous-même »
L'accordéon comme liste :
Accordéon
 Jill
 Veille

 Adam

Exemple
<button onclick="myFunction('Demo1')" class="w3-button w3-block
w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">

<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>

Essayez-le vous-même »
Accordéon dans une barre latérale (vous en apprendrez plus sur
les barres latérales plus tard) :

Exemple
<div class="w3-sidebar w3-bar-block w3-light-grey w3-
card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-
button" onclick="myAccFunc()">Accordion</a>
<div id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-
button" onclick="myDropFunc()">Dropdown</a>
<div id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Essayez-le vous-même »

Accordéons animés
Utilisez l'une des classes w3-animate pour faire disparaître, zoomer ou faire
glisser le contenu de l'accordéon :

Accordéon
Exemple
<div id="Demo1" class="w3-hide w3-animate-zoom">

Essayez-le vous-même »

Barres de
navigation [Link]
❮ PrécédentSuivant ❯

Verticale:

MaisonLien 2Lien 3Lien 4Lien 5

Horizontal:

MaisonLien 1
Dérouler

MaisonLien 1
Dérouler

MaisonLien 1Texte
Classes de la barre de navigation
[Link]
[Link] fournit les classes suivantes pour les barres de navigation :

Classe Définit

barre w3 Conteneur horizontal pour éléments HTML

bloc-barre-w3 Conteneur vertical pour éléments HTML

article-bar-w3 Éléments de barre de conteneur

barre latérale w3 Barre latérale verticale pour les éléments

HTML

w3-mobile Rend n'importe quel élément de barre réactif

aux mobiles

w3-dropdown-hover Élément déroulant survolable

w3-dropdown-clic Élément déroulant cliquable (au lieu du

survol)

Navigation de base
La classe w3-bar est un conteneur permettant d'afficher des éléments HTML
horizontalement.

La classe w3-bar-item définit les éléments conteneurs.

C'est un outil parfait pour créer des barres de navigation :

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Essayez-le vous-même »

PUBLICITÉ

Navigation réactive
La classe w3-mobile rend tous les éléments de la barre réactifs (horizontal
sur les grands écrans et vertical sur les petits).

Écrans moyens et grands :

MaisonLien 1Lien 2

Petits écrans :

MaisonLien 1Lien 2
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>

Essayez-le vous-même »
Barres de navigation colorées
Utilisez une classe w3-color pour ajouter une couleur à la barre de
navigation :

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">

Essayez-le vous-même »

Barres de navigation bordées

Utilisez une classe w3-border ou w3-card pour ajouter des bordures autour
de la barre de navigation ou pour l'afficher sous forme de carte :

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-bar w3-border w3-card-4">

Essayez-le vous-même »

Lien actif/actuel
Ajoutez une classe w3-color à un lien pour le mettre en évidence :

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Essayez-le vous-même »

Liens survolables
Lorsque vous passez la souris sur un bouton, la couleur d'arrière-plan devient
grise.

Si vous souhaitez une couleur d'arrière-plan différente au survol, utilisez l'une

des classes de couleurs w3-hover :

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link
1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link
2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link
3</a>
</div>

Essayez-le vous-même »

Si vous souhaitez plutôt modifier la couleur du texte, désactivez l'effet de

survol par défaut avec la classe w3-hover-none et ajoutez une classe w3-
hover-text .

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-border w3-black">
<a href="#" class="w3-bar-item w3-button">Default</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-
grey w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-
grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-
grey w3-hover-text-white">Link 3</a>
</div>
Essayez-le vous-même »

Prenez le temps de jouer avec différents effets de survol :

Lien 1Lien 2Lien 3

Lien 1Lien 2Lien 3

Lien 1Lien 2Lien 3

Lien 1Lien 2Lien 3

Exemple
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-
white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-
white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-
white w3-bottombar w3-hover-border-black">Link 3</a>
</div>

Essayez-le vous-même »

Liens alignés à droite

Utilisez la classe w3-right sur un élément de liste pour aligner à droite un
lien spécifique :

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-
right">Link 3</a>
</div>

Essayez-le vous-même »

Taille de la barre de navigation

Utilisez une classe w3-size pour modifier la taille de la police des liens à
l'intérieur de la barre de navigation :

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">

Essayez-le vous-même »

Utilisez une classe w3-padding pour modifier le remplissage de chaque lien

à l'intérieur de la barre de navigation :

MaisonLien 1Lien 2Lien 3

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-
16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link
1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link
2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link
3</a>
</div>

Essayez-le vous-même »

Remarque : vous pouvez également ajouter un remplissage à la barre de

navigation, au lieu de chaque bouton. Cependant, si vous procédez ainsi,
notez que les liens ne bénéficient pas d'un remplissage complet au survol :

MaisonLien 1Lien 2
Exemple
<div class="w3-bar w3-green w3-padding-16"></div>

Essayez-le vous-même »

Personnalisez la largeur des liens avec la propriété CSS width

( Remarque : utilisez w3-mobile pour transformer les liens à 100 % de

largeur sur les petits écrans) :
MaisonLien 1Lien 2

MaisonLien 1MaisonLien 1
Exemple
<div class="w3-bar w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-
green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-
mobile" style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-
mobile" style="width:33%">Link 2</a>
</div>

Essayez-le vous-même »

Barre de navigation avec icônes

Exemple
<div class="w3-bar w3-light-grey w3-border">
<a href="#" class="w3-bar-item w3-button w3-green"><i class="fa
fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-
in"></i></a>
</div>

Essayez-le vous-même »
Les classes « fa fa » dans l'exemple ci-dessus affichent des icônes « Font
Awesome ».

Apprenez-en plus sur la façon d'afficher les icônes dans le chapitre Icônes
[Link] .

Texte de la barre de navigation

Si vous souhaitez du texte au lieu de boutons à l'intérieur de la barre de
navigation, utilisez la classe w3-bar-item pour obtenir le même remplissage
que les boutons.
MaisonLien 1Lien 2Lien 3Texte
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span class="w3-bar-item">Text</span>
</div>

Essayez-le vous-même »

Barre de navigation avec entrées et

boutons
MaisonLien 1Lien 2Aller
Exemple
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-
input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>

Essayez-le vous-même »

Barre de navigation avec menu

déroulant
Déplacez la souris sur le lien « Dropdown » :

MaisonLien 1
Dérouler
Exemple
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
 <button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>

Essayez-le vous-même »

Menu déroulant cliquable

Utilisez w3-dropdown-click si vous préférez cliquer sur le lien déroulant au
lieu de le survoler :

MaisonLien 1
Dérouler
Exemple
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown <i class="fa fa-caret-down"></i>
</button>
<div id="demo" class="w3-dropdown-content w3-bar-block w3-card-
4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>

Essayez-le vous-même »

Menu déroulant horizontal

Supprimez la classe w3-bar-block du conteneur déroulant si vous souhaitez
que les liens déroulants s'affichent horizontalement au lieu de verticalement :

MaisonLien 1
Dérouler
Exemple
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
 <a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>

Essayez-le vous-même »

Barre de navigation réactive avec

menu déroulant réactif
Utilisez la classe w3-mobile sur tous les liens, y compris le conteneur
déroulant, pour créer une barre de navigation réactive avec des liens
déroulants réactifs.

Redimensionnez la fenêtre du navigateur pour voir l’effet :

MaisonLien 1Lien 2
Dérouler
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-
green">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div class="w3-dropdown-hover w3-mobile">
<button class="w3-button">Dropdown <i class="fa fa-caret-
down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link
1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link
2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link
3</a>
</div>
</div>
</div>

Essayez-le vous-même »
Barre de navigation fixe
Pour forcer la barre de navigation à rester en haut ou en bas de la page,
même lorsque l'utilisateur fait défiler la page, enroulez un élément <div>
autour de la barre et ajoutez la classe w3-top ou w3-bottom :

Dessus fixe
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>

Essayez-le vous-même »

Fond fixe
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>

Essayez-le vous-même »

Barre de navigation verticale

La classe w3-bar-block est un conteneur permettant d'afficher des éléments
HTML verticalement.

MaisonLien 1Lien 2Lien 3

Exemple
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Essayez-le vous-même »
Réduire la barre de navigation
Lorsque la barre de navigation prend trop de place sur un petit écran et que
vous ne souhaitez pas l'afficher verticalement par défaut, vous pouvez utiliser
les classes masquer et afficher sur des liens spécifiques dans la barre de
navigation.

Dans l'exemple ci-dessous, la barre de navigation est remplacée par un

bouton (☰) dans le coin supérieur droit lorsqu'elle est affichée sur des
tablettes et des appareils mobiles. Lorsque le bouton est cliqué, les liens de la
barre de navigation s'empilent verticalement :

Exemple
Essayez-le vous-même »

Navigation latérale
La classe w3-sidebar crée une navigation latérale :

Passez au chapitre suivant pour en savoir plus sur la navigation latérale.

Barre latérale [Link]

❮ PrécédentSuivant ❯

Barres de navigation verticales

[Link]
Avec la navigation latérale, vous avez plusieurs options :

 Toujours afficher le volet de navigation à gauche du contenu de la page

 Utilisez une navigation latérale réactive, pliable et « entièrement
automatique »
  Ouvrir le volet de navigation sur la partie gauche du contenu de la page
 Ouvrir le volet de navigation sur tout le contenu de la page
 Faites glisser le contenu de la page vers la droite lors de l'ouverture du
volet de navigation
 Afficher le volet de navigation sur le côté droit au lieu du côté gauche

Toujours afficher la barre latérale

Exemple
<div class="w3-sidebar w3-bar-block" style="width:25%">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-left:25%">
... page content ...
</div>

Essayez-le vous-même »

PUBLICITÉ

Ouvrir la barre de navigation latérale

sur une partie du contenu
Exemple
function w3_open() {
[Link]("mySidebar").[Link] = "block";
}

function w3_close() {
[Link]("mySidebar").[Link] = "none";
}

Essayez-le vous-même »
Ouvrir la barre de navigation latérale
sur le contenu
Exemple
function w3_open() {
[Link]("mySidebar").[Link] = "100%";
[Link]("mySidebar").[Link] = "block";
}

function w3_close() {
[Link]("mySidebar").[Link] = "none";
}

Essayez-le vous-même »

Navigation latérale réactive et pliable

Exemple
<div class="w3-sidebar w3-bar-block w3-collapse w3-
card" style="width:200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">Close &times;</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div class="w3-main" style="margin-left:200px">

<div class="w3-teal">
<button class="w3-button w3-teal w3-
xlarge" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>
</div>

<script>
function w3_open() {
[Link]("mySidebar").[Link] = "block";
}

function w3_close() {
[Link]("mySidebar").[Link] = "none";
}
</script>

Essayez-le vous-même »

Faites glisser le contenu de la page

vers la droite
Exemple
function w3_open() {
[Link]("main").[Link] = "25%";
[Link]("mySidebar").[Link] = "25%";
[Link]("mySidebar").[Link] = "block";
[Link]("openNav").[Link] = 'none';
}

function w3_close() {
[Link]("main").[Link] = "0%";
[Link]("mySidebar").[Link] = "none";
[Link]("openNav").[Link] = "inline-
block";
}

Essayez-le vous-même »

Navigation latérale droite

Exemple
<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
<h5 class="w3-bar-item">Menu</h5>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-right:25%">
... page content ...
</div>

Essayez-le vous-même »
Navigation rétractable sur le côté
droit
Exemple
<div class="w3-sidebar w3-bar-block w3-
collapse" style="width:200px;right:0" id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">Close &times;</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div class="w3-main" style="margin-right:200px">

<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge w3-right w3-hide-
large" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
<h2>My Page</h2>
</div>
</div>

</div>

<script>
function w3_open() {
[Link]("mySidebar").[Link] = "block";
}

function w3_close() {
[Link]("mySidebar").[Link] = "none";
}
</script>

Essayez-le vous-même »

Navigation à gauche et à droite

Exemple
Essayez-le vous-même »
Styliser la navigation latérale
Ajoutez la classe de couleur w3- à la barre latérale w3 pour modifier la
couleur d'arrière-plan. Si vous souhaitez un lien actif/actuel pour permettre à
l'utilisateur de savoir sur quelle page il se trouve, ajoutez également la
classe de couleur w3- à l'un des liens :

Lien 1Lien 2Lien 3Lien 4

Lien 1Lien 2Lien 3Lien 4

Lien 1Lien 2Lien 3Lien 4

Exemple
<div class="w3-sidebar w3-red">

Essayez-le vous-même »

Navigation latérale bordée

Utilisez la classe w3-border pour ajouter une bordure autour de la navigation
latérale :

Lien 1Lien 2Lien 3

Exemple
<div class="w3-sidebar w3-border">

Essayez-le vous-même »

Ajoutez la classe w3-border-bottom aux liens pour créer des séparateurs de

liens :

Lien 1Lien 2Lien 3

Exemple
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Link
1</a>
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Link
2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Essayez-le vous-même »
Utilisez la classe w3-card pour afficher la navigation latérale sous forme de
carte :

Lien 1Lien 2Lien 3

Exemple
<nav class="w3-sidebar w3-card">

Essayez-le vous-même »

Liens survolables
Lorsque vous passez la souris sur les liens à l'intérieur d'un bloc de barres, la
couleur d'arrière-plan devient grise.

Si vous souhaitez une couleur d'arrière-plan différente au survol, utilisez l'une

des classes w3-hover-color :

Lien 1Lien 2Lien 3Lien 4

Exemple
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-black">Link
1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link
2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link
3</a>
</div>

Essayez-le vous-même »

Vous pouvez désactiver l'effet de survol par défaut avec la classe w3-hover-
none . Ceci est souvent utilisé lorsque vous souhaitez uniquement mettre en
surbrillance la couleur du texte (et non la couleur d'arrière-plan) lors du
survol :

Lien 1Lien 2Lien 3Lien 4

Exemple
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-
hover-text-grey">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-
hover-text-green">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-
hover-text-teal">Link 3</a>
</div>

Essayez-le vous-même »

Tailles de navigation latérale

Taille de police augmentée (w3-large etc) :

Lien 1Lien 2Lien 3

Rembourrage augmenté (w3-padding etc) :

Lien 1Lien 2Lien 3

Exemple
<div class="w3-sidebar w3-bar-block w3-large">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>

Essayez-le vous-même »

Navigation latérale avec icônes

Exemple
<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-
globe"></i></a>
</div>

Essayez-le vous-même »

Barre latérale avec menu déroulant

Exemple
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-
down"></i></button>
<div class="w3-dropdown-content w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Essayez-le vous-même »

Astuce : lorsque le menu déroulant est « ouvert », le lien déroulant prend

une couleur d'arrière-plan grise pour indiquer qu'il est actif. Pour contourner
ce problème, ajoutez une classe w3-hover-color aux éléments <div> et
<a> « dropdown ».

Barre latérale avec accordéon

Exemple
<div class="w3-sidebar w3-light-grey w3-
card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<button class="w3-button w3-block w3-left-
align" onclick="myAccFunc()">Accordion</button>
<div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-
4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">Dropdown</bu
tton>
<div id="demoDrop" class="w3-dropdown-content w3-bar-block
w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Essayez-le vous-même »

Barre latérale animée

Utilisez l'une des classes w3-animate pour faire disparaître, zoomer ou faire
glisser la navigation latérale :

Exemple
<div class="w3-sidebar w3-animate-left">

Essayez-le vous-même »

Superposition de la barre latérale

La classe w3-overlay peut être utilisée pour créer un effet de superposition
lors de l'ouverture de la barre latérale. La classe w3-overlay ajoute un arrière-
plan noir avec une opacité de 50 % au « contenu de la page » - cet effet «
mettra en évidence » la navigation latérale.

Exemple
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-
index:5" id="mySidebar">
<button class="w3-bar-item w3-
button" onclick="w3_close()">Close</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<!-- Overlay -->

<div class="w3-overlay" onclick="w3_close()" styl
e="cursor:pointer" id="myOverlay"></div>

<!-- Page content -->

<button class="w3-button w3-
xxlarge" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
<h1>Sidebar Overlay</h1>
<p>Click on the "hamburger" icon to slide in the side
navigation.</p>
</div>
<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
[Link]("mySidebar").[Link] = "block";
[Link]("myOverlay").[Link] = "block";
}

function w3_close() {
[Link]("mySidebar").[Link] = "none";
[Link]("myOverlay").[Link] = "none";
}
</script>

Essayez-le vous-même »

Contenu de la barre latérale

Ajoutez ce que vous voulez dans la navigation latérale :

Exemple
<div class="w3-sidebar w3-bar-block w3-light-
grey" style="width:50%">
<div class="w3-container w3-dark-grey">
<h4>Menu</h4>
</div>

<img src="img_snowtops.jpg">

<a href="#" class="w3-bar-item w3-button w3-red">Home</a>

<a href="#" class="w3-bar-item w3-button">Projects
<span class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>

<div class="w3-panel w3-blue-grey w3-display-container">

<span class="w3-button w3-display-topright">X</span>
<p>Lorem ipsum box...</p>
</div>
</div>

Essayez-le vous-même »
Onglets de
navigation [Link]
❮ PrécédentSuivant ❯

LondresParisTokyo

Londres
Londres est la capitale de l'Angleterre.

C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine

de plus de 9 millions d'habitants.

Navigation par onglets

La navigation par onglets est un moyen de naviguer sur un site Web.

Normalement, la navigation par onglets utilise des boutons de navigation

(onglets) disposés avec l'onglet sélectionné en surbrillance.

Cet exemple utilise des éléments avec le même nom de classe (« ville » dans
notre exemple) et modifie le style entre display:none et display:block pour
masquer et afficher un contenu différent :

Exemple
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">

<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Et quelques boutons cliquables pour ouvrir le contenu des onglets :

Exemple
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-
button" onclick="openCity('London')">London</button>
<button class="w3-bar-item w3-
button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-
button" onclick="openCity('Tokyo')">Tokyo</button>
</div>

Et un JavaScript pour faire le travail :

Exemple
function openCity(cityName) {
var i;
var x = [Link]("city");
for (i = 0; i < [Link]; i++) {
x[i].[Link] = "none";
}
[Link](cityName).[Link] = "block";
}

Essayez-le vous-même »

JavaScript expliqué
La fonction openCity() est appelée lorsque l'utilisateur clique sur l'un des
boutons du menu.

La fonction masque tous les éléments avec le nom de classe « ville »

( display="none" ) et affiche l'élément avec le nom de ville donné
( display="block" );

PUBLICITÉ

Onglets fermables
LondresParisTokyo
×
Londres
Londres est la capitale de l'Angleterre.

Pour fermer un onglet,

ajoutez onclick="[Link]='none'" à un élément
à l'intérieur du conteneur d'onglets :

Exemple
<div id="London" class="w3-display-container">
<span onclick="[Link]='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>

Essayez-le vous-même »

Onglet Actif/Actuel
Pour mettre en évidence l'onglet/la page sur laquelle se trouve l'utilisateur,
utilisez JavaScript et ajoutez une classe de couleur au lien actif. Dans
l'exemple ci-dessous, nous avons ajouté une classe « tablink » à chaque lien.
De cette façon, il est facile d'obtenir tous les liens associés aux onglets et de
donner au lien de l'onglet actuel une classe « w3-red » pour le mettre en
évidence :

Exemple
function openCity(evt, cityName) {
var i, x, tablinks;
x = [Link]("city");
for (i = 0; i < [Link]; i++) {
x[i].[Link] = "none";
}
tablinks = [Link]("tablink");
for (i = 0; i < [Link]; i++) {
tablinks[i].className = tablinks[i].[Link](" w3-
red", "");
}
[Link](cityName).[Link] = "block";
[Link] += " w3-red";
}

Essayez-le vous-même »
Onglets verticaux
Exemple
<nav class="w3-sidebar w3-bar-block w3-light-
grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event,
'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event,
'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event,
'Tokyo')">Tokyo</button>
</nav>

Essayez-le vous-même »

Contenu de l'onglet animé

Utilisez l’une des classes w3-animate pour faire disparaître, zoomer ou faire
glisser le contenu d’un onglet :

Exemple
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>

Essayez-le vous-même »

Galerie d'images à onglets

Cliquez sur une image:
×
Nature
Exemple
<a href="javascript:void(0)" class="w3-hover-opacity" onclic
k="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>

<div id="Nature" class="picture w3-display-container">

<img src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="[Link]='none'" class="
w3-display-topright">&times;</span>
<div class="w3-display-bottomleft w3-container">Nature</div>
</div>

Essayez-le vous-même »

Onglets dans une grille

Utilisation des onglets dans une disposition en troisième colonne. Notez que
nous ajoutons une bordure inférieure à l'onglet actif, au lieu d'une couleur
d'arrière-plan :

Exemple
Essayez-le vous-même »
Pagination [Link]
❮ PrécédentSuivant ❯

«123456»

Pagination de base
Si vous avez un site Web avec de nombreuses pages, vous souhaiterez peut-
être utiliser une sorte de pagination.

Pour créer une pagination de base, utilisez des boutons ( w3-button ) dans
une barre ( w3-bar ).

Exemple
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>

Essayez-le vous-même »

Pour supprimer l'espace entre les boutons, ajoutez une classe w3-bar-item :

Exemple
<div class="w3-bar">
<a href="#" class="w3-button">&laquo;</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">&raquo;</a>
</div>

Essayez-le vous-même »
Flèches de pagination
Utilisez des entités HTML ou des icônes d’une bibliothèque d’icônes pour
ajouter des flèches de pagination :

«1234»
Exemple
<div class="w3-bar">
<a href="#" class="w3-button">&laquo;</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">&raquo;</a>
</div>

Essayez-le vous-même »

PUBLICITÉ

Lien actif/actuel
«1234»

Utilisez l'une des classes de couleurs w3 pour indiquer sur quelle page se
trouve l'utilisateur :

Exemple
<div class="w3-bar">
<a href="#" class="w3-button">&laquo;</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">&raquo;</a>
</div>

Essayez-le vous-même »
Couleur de survol
«1234»

Par défaut, lorsque vous déplacez la souris sur les liens de pagination, ils
prennent une couleur d'arrière-plan grise. Utilisez l'une des classes de
couleurs w3-hover- pour modifier la couleur de survol :

Exemple
<div class="w3-bar">
<a href="#" class="w3-button w3-hover-purple">&laquo;</a>
<a href="#" class="w3-button w3-hover-green">1</a>
<a href="#" class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button w3-hover-blue">3</a>
<a href="#" class="w3-button w3-hover-black">4</a>
<a href="#" class="w3-button w3-hover-orange">&raquo;</a>
</div>

Essayez-le vous-même »

Dimensionnement de la pagination
«1234»

«1234»
Utilisez w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge ou w3-
xxxlarge pour dimensionner la pagination :

Exemple
<div class="w3-bar w3-xlarge">

Essayez-le vous-même »

Pagination centrée
«1234»

Pour centrer la pagination, placez l'élément « w3-bar » à l'intérieur d'un

élément « w3-center » :

Exemple
<div class="w3-center">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">&laquo;</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">&raquo;</a>
</div>
</div>

Essayez-le vous-même »

Pagination avec bordure

«12345»

Ajoutez la classe w3-border pour créer une pagination avec des bordures :

Exemple
<div class="w3-bar w3-border">

Essayez-le vous-même »

Bordures arrondies
«12345»

Ajoutez la classe w3-round à côté de w3-border pour les bordures arrondies :

Exemple
<div class="w3-bar w3-border w3-round">

Essayez-le vous-même »

Autres exemples de pagination

La classe w3-bar peut également être utilisée pour créer des boutons
suivant/précédent :

❮ PrécédentSuivant ❯

❮❯
Exemple suivant/précédent
<div class="w3-bar w3-border w3-round">
<a href="#" class="w3-button">&#10094; Previous</a>
<a href="#" class="w3-button w3-right">Next &#10095;</a>
</div>

Essayez-le vous-même »
MaisonLien 1Lien 2Lien 3
Exemple de menu en ligne
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>

Essayez-le vous-même »

Barres de
progression [Link]
❮ PrécédentSuivant ❯

Une barre de progression peut être utilisée pour montrer à quel stade se
trouve un utilisateur dans un processus :

20%

Cliquez sur moi

Barre de progression de base

Un élément <div> normal peut être utilisé pour une barre de progression.

La propriété CSS width peut être utilisée pour définir la hauteur et la largeur
d'une barre de progression.
Exemple
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>

Essayez-le vous-même »

Largeur de la barre de progression

Modifiez la largeur d'une barre de progression avec la propriété
CSS width (de 0 à 100 %) :

Exemple
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>

Essayez-le vous-même »

PUBLICITÉ

Couleurs de la barre de progression

Utilisez les classes de couleurs w3 pour modifier la couleur d'une barre de
progression :

Exemple
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>

Essayez-le vous-même »
Étiquettes de la barre de progression
Ajoutez du texte à l'intérieur d'un élément w3-container pour ajouter une
étiquette à la barre de progression.

Utilisez la classe w3-center pour centrer l'étiquette. Si elle est omise, elle
sera alignée à gauche.

25%

50%

75%
Exemple
<div class="w3-light-grey">
<div class="w3-container w3-green w3-
center" style="width:25%">25%</div>
</div>

Essayez-le vous-même »

Taille du texte de la barre de

progression
Utilisez les classes w3- size pour modifier la taille du texte dans le
conteneur :

50%

50%

50%
Exemple
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>

Essayez-le vous-même »
Rembourrage de la barre de
progression
Utilisez les classes w3-padding pour ajouter un remplissage au conteneur.

25%

25%

25%
Exemple
<div class="w3-light-grey">
<div class="w3-container w3-red w3-padding w3-
center" style="width:25%">25%</div>
</div>
</div>

Essayez-le vous-même »

Barres de progression arrondies

Utilisez les classes w3-round pour ajouter des coins arrondis à une barre de
progression :

25%

25%

25%
Exemple
<div class="w3-light-grey w3-round">
<div class="w3-container w3-round w3-
blue" style="width:25%">25%</div>
</div>

Essayez-le vous-même »

Barre de progression dynamique

Utilisez JavaScript pour créer une barre de progression dynamique :
Cliquez sur moi
Exemple
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-
green" style="height:24px;width:1%"></div>
</div>

<button class="w3-button w3-light-grey" onclick="move()">Click

Me</button>

<script>
function move() {
var elem = [Link]("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
[Link] = width + '%';
}
}
}
</script>

Essayez-le vous-même »

Barre de progression dynamique

avec étiquettes
Étiquette centrée :

Exemple
20%

Click Me

Essayez-le vous-même »

Étiquette alignée à gauche :

Exemple
20%

Click Me

Essayez-le vous-même »

Étiquette à l'extérieur de la barre de progression :

Exemple
20%

Click Me

Essayez-le vous-même »

Un autre exemple (avancé) :

Exemple
Added 0 of 10 photos

Upload Photos

Essayez-le vous-même »

Diaporama [Link]
❮ PrécédentSuivant ❯
Texte de la légende
❮❯

Diaporama manuel
Afficher un diaporama manuel avec [Link] est très simple.

Créez simplement plusieurs éléments avec le même nom de classe :

Exemple
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">

Et deux boutons pour faire défiler les images :

Exemple
<button class="w3-button w3-display-left" onclick="plusDivs(-
1)">&#10094;</button>
<button class="w3-button w3-display-
right" onclick="plusDivs(+1)">&#10095;</button>

Et ajoutez un JavaScript pour sélectionner les images :

Exemple
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = [Link]("mySlides");
if (n > [Link]) {slideIndex = 1}
if (n < 1) {slideIndex = [Link]} ;
for (i = 0; i < [Link]; i++) {
x[i].[Link] = "none";
}
x[slideIndex-1].[Link] = "block";
}

Essayez-le vous-même »

JavaScript expliqué
Tout d’abord, définissez le slideIndex sur 1. (Première image)

Appelez ensuite showDivs() pour afficher la première image.

Lorsque l'utilisateur clique sur l'un des boutons, appelez plusDivs() .

La fonction plusDivs() soustrait un ou ajoute un au slideIndex.

La fonction showDiv() masque ( display="none" ) tous les éléments avec le

nom de classe "mySlides" et affiche ( display="block" ) l'élément avec le
slideIndex donné.

Si le slideIndex est supérieur au nombre d'éléments ([Link]), le slideIndex

est défini sur zéro.

Si slideIndex est inférieur à 1, il est défini sur le nombre d'éléments

([Link]).
 PUBLICITÉ

Diaporama automatique

Afficher un diaporama automatique est encore plus simple.

Vous avez seulement besoin d'un peu de JavaScript différent :

Exemple
var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = [Link]("mySlides");
for (i = 0; i < [Link]; i++) {
x[i].[Link] = "none";
}
slideIndex++;
if (slideIndex > [Link]) {slideIndex = 1}
x[slideIndex-1].[Link] = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}

Essayez-le vous-même »

Diapositives HTML
Les diapositives ne doivent pas nécessairement être des images.

Il peut s’agir de n’importe quel contenu HTML :

Diapositive 1
Lorem ipsum
Exemple
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the
2020s</i></h1>
</div>
</div>

Essayez-le vous-même »
Légende du diaporama

Neige, Norvège
❮❯

Ajoutez un texte de légende pour chaque diapositive d'image avec les

classes w3-display-* (topleft, topmiddle, topright, bottomleft, bottommiddle,
bottomright, left, right ou middle) :

Exemple
<div class="w3-display-container mySlides">
<img src="img_snowtops.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16
w3-black">
French Alps
</div>
</div>

Essayez-le vous-même »

Indicateurs du diaporama
Un exemple d'utilisation de boutons pour indiquer le nombre de diapositives
dans le diaporama et la diapositive que l'utilisateur est en train de visualiser.
 ❮ Précédent Suivant ❯
123
Exemple
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">&#10094;
Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next
&#10095;</button>

<button class="w3-button
demo" onclick="currentDiv(1)">1</button>
<button class="w3-button
demo" onclick="currentDiv(2)">2</button>
<button class="w3-button
demo" onclick="currentDiv(3)">3</button>
</div>

Essayez-le vous-même »

Un autre exemple :
 ❮
❯

Exemple
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-
bottommiddle" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">&#10094;</div>
<div class="w3-right" onclick="plusDivs(1)">&#10095;</div>
<span class="w3-badge demo w3-
border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-
border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-
border" onclick="currentDiv(3)"></span>
</div>
</div>

Essayez-le vous-même »

Les images comme indicateurs

Un exemple d’utilisation d’images comme indicateurs :
Exemple
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:10
0%">
<img class="mySlides" src="img_snow_wide.jpg" style="width:100%
">
<img class="mySlides" src="img_mountains_wide.jpg" style="width
:100%">

<div class="w3-row-padding w3-section">

<div class="w3-col s4">
 <img class="demo w3-opacity" src="img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity" src="img_snow_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity" src="img_mountains_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(3)">
</div>
</div>
</div>

Essayez-le vous-même »

Plusieurs diaporamas sur la même

page
Pour utiliser plusieurs diaporamas sur une page, vous devez classer les
membres de chaque groupe de diaporamas avec des classes différentes :

Exemple
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%"
>
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>

<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>

Essayez-le vous-même »

Diapositives animées
Faites glisser ou faites apparaître un élément depuis le haut, le bas, la gauche
ou la droite de l'écran avec les classes w3-animate-*.
Exemple
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">

Essayez-le vous-même »

Animation décolorée
La classe w3-animate-fading fait apparaître et disparaître un élément (cela
prend environ 10 secondes).
Exemple
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">

Essayez-le vous-même »

❮ PrécédentSuivant ❯

Modale [Link]
❮ PrécédentSuivant ❯

Une fenêtre modale est une boîte de dialogue/fenêtre contextuelle qui

s'affiche en haut de la page actuelle :

Ouvrir la modale

Classes modales [Link]

[Link] fournit les classes suivantes pour les fenêtres modales :
 Classe Définit

w3-modal Le conteneur modal

Contenu modal w3 Le contenu modal

Créer une modale

La classe w3-modal définit un conteneur pour un modal.

La classe w3-modal-content définit le contenu modal.

Le contenu modal peut être n'importe quel élément HTML (divs, titres,
paragraphes, images, etc.).

Exemple
<!-- Trigger/Open the Modal -->
<button onclick="[Link]('id01').[Link]='b
lock'"
class="w3-button">Open Modal</button>

<!-- The Modal -->

<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="[Link]('id01').[Link]
y='none'"
class="w3-button w3-display-topright">&times;</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>

Essayez-le vous-même »

PUBLICITÉ
Ouvrir une modale
Utilisez n'importe quel élément HTML pour ouvrir la fenêtre modale.
Cependant, il s'agit souvent d'un bouton ou d'un lien.

Ajoutez l' attribut onclick et pointez vers l'ID du modal ( id01 dans notre
exemple), en utilisant la méthode [Link]().

Fermer une modale

Pour fermer une fenêtre modale, ajoutez la classe w3-button à un élément
avec un attribut onclick qui pointe vers l'ID de la fenêtre modale ( id01 ). Vous
pouvez également la fermer en cliquant en dehors de la fenêtre modale (voir
l'exemple ci-dessous).

Astuce : × est l'entité HTML préférée pour les icônes de fermeture, plutôt
que la lettre « x ».

En-tête et pied de page modal

Utilisez les classes w3-container pour créer différentes sections à l'intérieur
du contenu modal :

Modalité ouverte avec conteneurs

Exemple
<div id="id01" class="w3-modal">
<div class="w3-modal-content">

<header class="w3-container w3-teal">

<span onclick="[Link]('id01').[Link]
y='none'"
class="w3-button w3-display-topright">&times;</span>
<h2>Modal Header</h2>
</header>

<div class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
 <footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>

</div>
</div>

Essayez-le vous-même »

Modal comme une carte

Pour afficher la fenêtre modale sous forme de carte, ajoutez l'une des
classes w3-card-* au conteneur w3-modal-content :

Ouvrir la fenêtre modale sous forme de carte

Exemple
<div class="w3-modal-content w3-card-4">

Essayez-le vous-même »

Modaux animés
Utilisez l'une des classes w3-animate-zoom|top|bottom|right|left pour
faire glisser la modale dans une direction spécifique :

Zoom avant Haut Bas Gauche Droite Fondu en entrée

Exemple
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">

Essayez-le vous-même »

Vous pouvez également faire apparaître en fondu la couleur d'arrière-plan du

modal en définissant la classe w3-animate-opacity sur l'élément w3-modal :

Fondu en mode modal

Exemple
<div class="w3-modal w3-animate-opacity">
Essayez-le vous-même »

Image modale
Cliquez sur l'image pour l'afficher en modal, en taille réelle :

Exemple
<img src="img_snowtops.jpg" onclick="[Link]('mod
al01').[Link]='block'" class="w3-hover-opacity">

<div id="modal01" class="w3-modal w3-animate-

zoom" onclick="[Link]='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>

Essayez-le vous-même »

Galerie d'images modales

Cliquez sur une image pour l'afficher en taille réelle :
Exemple
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onCli
ck(this)">
</div>
<div class="w3-container w3-third">
<img src="img_lights.jpg" style="width:100%" onclick="onClick
(this)">
</div>
<div class="w3-container w3-third">
<img src="img_mountains.jpg" style="width:100%" onclick="onCl
ick(this)">
</div>
</div>

<div id="modal01" class="w3-modal" onclic

k="[Link]='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>

<script>
function onClick(element) {
[Link]("img01").src = [Link];
[Link]("modal01").[Link] = "block";
}
</script>
Essayez-le vous-même »

Formulaire de connexion modal

Cet exemple crée une fenêtre modale pour la connexion :

Exemple
Ouvrir la fenêtre de connexion
Essayez-le vous-même »

Modal avec contenu à onglets

Cet exemple crée une fenêtre modale avec un contenu à onglets :

Exemple
Ouvrir la fenêtre modale à onglets
Essayez-le vous-même »

Fermer la modale
Dans les exemples ci-dessus, nous utilisons un bouton pour fermer la fenêtre
modale. Cependant, avec un peu de JavaScript, vous pouvez également
fermer la fenêtre modale en cliquant en dehors de la boîte modale :

Exemple
// Get the modal
var modal = [Link]('id01');

// When the user clicks anywhere outside of the modal, close it

[Link] = function(event) {
if ([Link] == modal) {
[Link] = "none";
}
}

Essayez-le vous-même »
Avancé : Lightbox (galerie d'images
modale)
Cet exemple montre comment ajouter un diaporama d'images à l'intérieur
d'une fenêtre modale, pour créer une « lightbox » :

Exemple
Cliquez sur une image:
Essayez-le vous-même »

Astuce : pour en savoir plus sur les diaporamas, visitez notre

chapitre Diaporama [Link] .

Info-bulles [Link]
❮ PrécédentSuivant ❯
Passez la souris sur les phrases ci-dessous :

Londres est la capitale de l'Angleterre.

Londres est la capitale de l'Angleterre.

Classes d'info-bulles [Link]

[Link] fournit les classes d’info-bulles suivantes :

Classe Définit

info-bulle w3 L'élément d'info-bulle

w3-text Le texte de l'info-bulle

Élément d'info-bulle et texte d'info-

bulle
Les info-bulles affichent du texte (ou un autre contenu) lorsque vous survolez
un élément HTML.

La classe w3-tooltip définit l'élément sur lequel survoler la souris (le

conteneur d'info-bulle).

La classe w3-text définit le texte de l'info-bulle.

Passez la souris sur la phrase ci-dessous :

Londres est la capitale de l'Angleterre.

Exemple
<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>

Essayez-le vous-même »

Info-bulle en tant que balise

Passez la souris sur la phrase ci-dessous :

Londres est la capitale de l'Angleterre.

Exemple
<p class="w3-tooltip">London
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>

Essayez-le vous-même »

PUBLICITÉ

Info-bulle sur l'image

Passez la souris sur cette image pour voir l'effet :
Exemple (texte avant l'image)
<div class="w3-tooltip">
<p class="w3-text">A car is a...</p>
<img src="img_car.jpg" alt="Car">
</div>

Essayez-le vous-même »

Exemple (texte après l'image)

<div class="w3-tooltip">
<img src="img_car.jpg" alt="Car">
<p class="w3-text">A car is a...</p>
</div>

Essayez-le vous-même »

Info-bulle de positionnement absolu

Si vous souhaitez que l'info-bulle apparaisse dans une position absolue,
positionnez le texte de l'info-bulle avec CSS :

Londres est la capitale de l'Angleterre.

Exemple
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
Essayez-le vous-même »

Info-bulle colorée
Si vous souhaitez une info-bulle colorée, utilisez les classes de couleurs w3 :

Exemple
<span class="w3-text w3-tag w3-red">9 million inhabitants</span>

Essayez-le vous-même »

Info-bulle arrondie
Si vous souhaitez une info-bulle arrondie, utilisez les classes w3- round :

Exemple
<span class="w3-text w3-tag w3-round-xlarge">9 million
inhabitants</span>

Essayez-le vous-même »

Petite info-bulle
Si vous voulez une petite info-bulle, utilisez la classe w3-small :

Exemple
<span class="w3-text w3-tag w3-small">9 million
inhabitants</span>

Essayez-le vous-même »

Petite info-bulle
Si vous voulez une petite info-bulle, utilisez la classe w3-tiny :
Exemple
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>

Essayez-le vous-même »

Grande info-bulle
Si vous souhaitez une grande info-bulle, utilisez les classes w3- large :

Exemple
<span class="w3-text w3-tag w3-xlarge">9 million
inhabitants</span>

Essayez-le vous-même »

Info-bulle animée
Si vous souhaitez faire apparaître l'info-bulle en fondu, utilisez la classe w3-
animate-opacity :

Exemple
<span class="w3-text w3-tag w3-animate-opacity">9 million
inhabitants</span>

Essayez-le vous-même »

Grille fluide réactive [Link]

❮ PrécédentSuivant ❯

Grille réactive
[Link] prend en charge une grille fluide réactive de 12 colonnes.
Redimensionnez la page pour voir l’effet !

1
2
3
4
5
6
7
8
9
10
11
12

Cette partie occupera 12 colonnes sur un petit écran, 4 sur un écran moyen
et 3 sur un grand écran.

Cette partie occupera 12 colonnes sur un petit écran, 8 sur un écran moyen
et 9 sur un grand écran.

1
2
3
4
5
6
7
8
9
10
11
12

Exemple
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4 on a medium screen, and 3
on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8 on a medium screen, and 9
on a large screen.</p>
</div>
</div>

Essayez-le vous-même »

Lignes réactives
Le système de grille de [Link] est réactif. Les colonnes se réorganisent
automatiquement en fonction de la taille de l'écran : sur un grand écran, le
rendu peut être meilleur avec le contenu organisé en trois colonnes, mais sur
un petit écran, il peut être préférable que le contenu soit empilé les uns sur
les autres.

Classe Description

rangée w3 Conteneur pour classes réactives,

sans remplissage

Rembourrage de rangée Conteneur pour classes réactives,

w3 avec remplissage gauche et droit de
8 px

w3-col Définit une colonne dans une grille

réactive à 12 colonnes

w3-col possède les sous-classes suivantes :

Colonnes pour petits écrans (smartphones

classiques) :

Classe Description

s1 Définit 1 des 12 colonnes (largeur : 08,33 %) pour les

petits écrans

s2 Définit 2 des 12 colonnes (largeur : 16,66 %) pour les

petits écrans

s3 Définit 3 des 12 colonnes (largeur : 25,00 %) pour les

 petits écrans

s4 Définit 4 des 12 colonnes (largeur : 33,33 %) pour les

petits écrans

s5-s11

s12 Définit 12 colonnes sur 12 (largeur : 100 %). Valeur

par défaut pour les petits écrans

Colonnes pour écrans moyens (tablettes

typiques) :

Classe Description

m1 Définit 1 des 12 colonnes (largeur : 08,33 %) pour les

écrans moyens

m2 Définit 2 des 12 colonnes (largeur : 16,66 %) pour les

écrans moyens

m3 Définit 3 des 12 colonnes (largeur : 25,00 %) pour les

écrans moyens

m4 Définit 4 des 12 colonnes (largeur : 33,33 %) pour les

écrans moyens

m5-m11
 m12 Définit 12 colonnes sur 12 (largeur : 100 %). Valeur
par défaut pour les écrans de taille moyenne

Colonnes pour grands écrans (ordinateurs

portables et de bureau typiques) :

Classe Description

l1 Définit 1 des 12 colonnes (largeur : 08,33 %) pour les

grands écrans

l2 Définit 2 des 12 colonnes (largeur : 16,66 %) pour les

grands écrans

l3 Définit 3 des 12 colonnes (largeur : 25,00 %) pour les

grands écrans

l4 Définit 4 des 12 colonnes (largeur : 33,33 %) pour les

grands écrans

l5-l11

l12 Définit 12 colonnes sur 12 (largeur : 100 %). Valeur

par défaut pour les grands écrans)

Les classes ci-dessus peuvent être combinées pour créer des mises en page
plus dynamiques et flexibles.

Chaque classe est évolutive, donc si vous souhaitez définir la même largeur
pour les petits, moyens et grands écrans, il vous suffit de spécifier
la petite classe. Et si vous souhaitez la même largeur sur les écrans moyens
et grands, il vous suffit de spécifier la classe moyenne.
Cependant, si vous n'utilisez que des classes moyennes et/ou grandes, la
largeur se transformera toujours à 100 % sur les petits écrans.

Remarque : le nombre de colonnes doit toujours totaliser 12 pour chaque

ligne (6 + 6, 3 + 3 + 6, 9 + 3, etc.) !

PUBLICITÉ

Deux colonnes égales

Deux colonnes de largeur égale (50 %/50 %) sur toutes les tailles d'écran :

s6

s6

Exemple
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>

Essayez-le vous-même »

Deux colonnes inégales

Deux colonnes de largeur inégale (25%/75%) sur toutes les tailles d'écran :

s3

s9

Exemple
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>

Essayez-le vous-même »
Trois colonnes égales
Trois colonnes de largeur égale (33,3 %/33,3 %/33,3 %) sur toutes les tailles
d'écran :

s4

s4

s4

Exemple
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>

Essayez-le vous-même »

Trois colonnes inégales

Trois colonnes de largeurs différentes (25%/50%/25%) sur tablettes,
ordinateurs portables et ordinateurs de bureau. Sur les téléphones mobiles,
les colonnes s'empilent automatiquement (100% de largeur) :

m3

m6

m3

Exemple
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>

Essayez-le vous-même »
Remarque : cet exemple est le même que l'utilisation de w3-quarter (m3),
w3-half (m6), w3-quarter (m3), que vous avez appris dans le chapitre [Link]
Responsive .

Six colonnes
Six colonnes de largeur égale (16 % chacune) sur les tablettes, les
ordinateurs portables et les ordinateurs de bureau. Sur les téléphones
mobiles, les colonnes s'empilent automatiquement (100 % de largeur) :

m2

m2

m2

m2

m2

m2

Exemple
<div class="w3-row">
<div class="w3-col m2 w3-green w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple w3-center"><p>m2</p></div>
</div>

Essayez-le vous-même »

Mixte : Mobiles et ordinateurs

portables
Vous pouvez combiner des classes pour créer une mise en page dynamique
et flexible. Cet exemple produira une mise en page à deux colonnes avec une
répartition de 83,34 %/16,66 % (l10, l2) sur les grands écrans et une
répartition de 50 %/50 % (s6, s6) sur les petits écrans :
 l10 s6

l2 s6

Exemple
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink w3-center"><p>l10
s6</p></div>
<div class="w3-col l2 s6 w3-dark-grey w3-center"><p>l2
s6</p></div>
</div>

Essayez-le vous-même »

Mixte : Mobile, Tablettes et

Ordinateurs Portables
Cet exemple produira une disposition à trois colonnes avec une répartition 25
%/58,34 %/16,66 % (l3, l7, l2) sur les grands écrans, une répartition 50 %/25
%/25 % (m6, m3, m3) sur les écrans moyens et une répartition 33,3 %/33,3
%/33,3 % (s4, s4, s4) sur les petits écrans :

l3 m6 s4

l7 m3 s4

l2 m3 s4

Exemple
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6
s4</p></div>
<div class="w3-col l7 m3 s4 w3-dark-grey w3-center"><p>l7 m3
s4</p></div>
<div class="w3-col l2 m3 s4 w3-red w3-center"><p>l2 m3
s4</p></div>
</div>

Essayez-le vous-même »
Différence entre w3-row et w3-row-
padding
La classe w3-row définit un conteneur sans rembourrage, tandis que la classe
w3-row-padding ajoute un rembourrage gauche et droit de 8 px à chaque
colonne :

w3-rangée:
w3-ligne-rembourrage :
Exemple
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

Essayez-le vous-même »

Utilisation de w3-rest
La classe w3-rest est une classe puissante et flexible qui utilisera ce qui
reste de la colonne de la grille.

150 px

repos
75px

repos

100 px

100 px

repos

quart

80px

repos

quart

quart

quart

35%

repos

Exemple utilisant le repos

<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>

Essayez-le vous-même »
L'élément utilisant class="w3-rest" doit toujours être le dernier élément du
code source.

Utilisation du pourcentage
Utilisez la propriété de largeur CSS pour déterminer une largeur spécifique
des colonnes.
20%

60%

20%

45%

55%

15%

35%

10%

30%

10%

Exemple
<div class="w3-row">
<div class="w3-col w3-container w3-
green" style="width:20%"><p>20%</p></div>
<div class="w3-col w3-container w3-
blue" style="width:60%"><p>60%</p></div>
<div class="w3-col w3-container w3-
red" style="width:20%"><p>20%</p></div>
</div>

Essayez-le vous-même »

Code [Link]
❮ PrécédentSuivant ❯

Exemples d'affichage
La classe w3-panel est utilisée pour afficher des exemples dans un
conteneur gris :
Exemple
 Jill
 Veille

 Adam

Essayez-le vous-même »

Code d'affichage
La classe w3-code est utilisée pour afficher du code dans une police mono-
espacée lisible.

Exemple
fruits[0] = "Banane";
fruits[1] = "Pomme";
fruits[2] = "Mangue";
fruits[3] = "Prune";

Essayez-le vous-même »

Mettre en surbrillance le code en

ligne
La classe w3-codespan est utilisée pour mettre en évidence le code en
ligne :

L' htmlélément définit une page HTML.

Exemple
The <code class="w3-codespan">html</code> element defines an HTML
page.

Essayez-le vous-même »

PUBLICITÉ
Code de coloriage
W3Schools fournit une bibliothèque JavaScript pour colorier le code.

Exemple
fruits[ 0 ] = "Banane" ;
fruits[ 1 ] = "Pomme" ;
fruits[ 2 ] = " Mangue" ;
fruits[ 3 ] = "Prune" ;

Vous pouvez télécharger la bibliothèque à partir

d'ici : [Link]

Si vous utilisez la bibliothèque [Link], vous pouvez également utiliser

les classes de code décrites ci-dessous :

Mettre en surbrillance le code

JavaScript
La classe jsHigh est utilisée pour mettre en évidence le code JavaScript :

Exemple
<div class="w3-code jsHigh">

.. JavaScript code here

</div>

Essayez-le vous-même »

Mettre en surbrillance le code HTML

La classe htmlHigh est utilisée pour mettre en évidence le code HTML :

Exemple
<div class="w3-code htmlHigh">

.. HTML code goes here

</div>

Essayez-le vous-même »

Mettre en surbrillance le code CSS

La classe cssHigh est utilisée pour mettre en évidence le code CSS :

Exemple
<div class="w3-code cssHigh">

.. CSS code here

</div>

Essayez-le vous-même »

Filtres [Link]
❮ PrécédentSuivant ❯

Avec un peu de JavaScript, tous les composants de [Link] peuvent être

filtrés.

Tableaux de filtrage
Exemple

Nom Pays

Alfreds Futterkiste Allemagne

Le snabbkop de Berglund Suède

 Commerce sur l'île ROYAUME-UNI

Königlich Essen Allemagne

Les caves à vin de Bacchus le Rieur Canada

Magasins Alimentaires Réunis Italie

Nord/Sud ROYAUME-UNI

Spécialités parisiennes France

Essayez-le vous-même »

PUBLICITÉ

Listes de filtres
Exemple
 Adèle
 Agnès
 Gamelle
 Bob
 Calvin
 Christine
 Cindy

Essayez-le vous-même »

Listes déroulantes de filtrage

Exemple
Essayez-le vous-même (survolez) » Essayez-le vous-même (cliquez) »

Tendances [Link]
❮ PrécédentSuivant ❯

CONCEPTION DE SITES WEB

tendances

2017
Chaque année, vous verrez de nouvelles techniques et tendances Web.

Sur cette page, nous vous présenterons certaines des tendances les plus
pertinentes en matière de conception Web.

Conception plate
La tendance du design plat a commencé avec Windows Phone 7 et Windows 8
en 2010 :
Il a été suivi par Apple avec iOS 7 en 2013 :

Le Flat Design utilise souvent des couleurs que nous connaissons du

marketing, des panneaux de signalisation et des notes autocollantes :

Rouge

Vert

Bleu

Jaune

Essayez-le vous-même »
L'un des principaux problèmes du flat design est de comprendre quelles
zones sont cliquables.
Quelle est la différence entre une image et un bouton cliquable ?
Conception presque plate (Flat 2.0)
Almost flat est une nouvelle alternative au design plat original.

Presque plat, il acquiert plus de profondeur, des couleurs plus vives, des
ombres complexes et de la dimension.

Ombres :
MaisonLien 1Lien 2
Essayez-le vous-même »

PUBLICITÉ

Conception matérielle
Puisque nous avons peut-être atteint le sommet du flat design (avec presque
du flat design), on s'attend à ce que de nombreux designers optent pour le
Material Design (conçu par Google en 2014).

Material Design utilise des éléments qui rappellent le papier et l'encre. De

plus, les éléments présentent des ombres réalistes et des effets de survol.
Conception matérielle de Google

Essayez-le vous-même »

Cartes
Les cartes les plus courantes sont des rectangles avec une image et du texte.

Les cartes sont devenues une structure courante pour organiser les titres, les
images et le texte sur un plan égal.
Les cartes peuvent être petites ou grandes, avec ou sans images, et avec ou
sans ombres :

John
Architecte et ingénieur

Essayez-le vous-même »

Jean Doe
1 nouvelle demande d'ami
PDG chez Mighty Schools. Marketing et publicité. À la recherche d'un nouvel
emploi et de nouvelles opportunités.

Voyage
 Cinque Terre. Ligurie. Italie.

Logos de nettoyage
Les logos plus propres sont le résultat de la popularité du design plat :

Minimalisme
Facile à lire. Facile à comprendre. Facile à concevoir.

Nos clients
MaisonLien 1Lien 2

NOUS AJOUTERONS UNE

RÉELLE VALEUR
AUX ACTIVITÉS DE NOS
CLIENTS
 Nous savons comment
rendre nos clients heureux
Le minimalisme peut aller de pair avec le design presque plat :

Sur moi

Le terme minimaliste fait souvent référence à tout ce qui est épuré ou réduit
à l’essentiel.

Le minimalisme de conception peut également aider à simplifier et à

améliorer les conceptions.

Typographie lisible
La typographie naturelle du flat design est simple et facile à lire.

L'espacement des lettres et des lignes est généralement plus grand.

Attendez-vous également à des tailles de police plus grandes afin de mieux

concentrer l'attention du lecteur.

Serif standard
La simplicité et la lisibilité sont les raisons les plus importantes du flat design. La simplicité et la
lisibilité sont les raisons les plus importantes du flat design. La simplicité et la lisibilité sont les
raisons les plus importantes du flat design.

Sans Serif standard

La simplicité et la lisibilité sont les raisons les plus importantes du flat design. La
simplicité et la lisibilité sont les raisons les plus importantes du flat design. La simplicité
et la lisibilité sont les raisons les plus importantes du flat design.

Typographie [Link]
La simplicité et la lisibilité sont les raisons les plus importantes du flat design.
La simplicité et la lisibilité sont les raisons les plus importantes du flat design.
La simplicité et la lisibilité sont les raisons les plus importantes du flat design.

La lisibilité est une raison importante de la popularité de la typographie plate.

Essayez-le vous-même »

Entrée plein écran

De plus en plus de sites utilisent le plein écran pour les saisies telles que les
inscriptions et les connexions, au lieu d'utiliser seulement une petite partie de
la page.

Le plein écran utilise souvent une superposition d'écran ou une fenêtre

modale au lieu de rediriger vers une nouvelle page.

Inscription aux cours

Prénom

Nom de famille
Mâle

Femelle

Je ne sais pas (désactivé)

Essayez-le vous-même »

Mobile First
Historiquement, les concepteurs de sites Web ont d’abord développé des
applications Web pour les ordinateurs, puis ont ajouté une conception Web
réactive pour garantir que le Web soit beau lorsqu’il est visualisé sur une
tablette ou un téléphone.

Cette tendance s’oriente vers une conception d’abord destinée aux mobiles,
puis vers l’ajout d’une conception réactive pour faire fonctionner un site sur
les ordinateurs de bureau et les ordinateurs portables.

Le 50/50 est un moyen simple de concevoir des sites Web réactifs. Avec une
conception 50/50, l'écran peut afficher deux pages sur les grands écrans et
une page sur les écrans étroits.

Mon travail
Quelques uns de mes derniers projets.
Appelez-moi simplement génial.

Sur moi
Lorem ipusm sed vitae justo condimentum, porta lectus vitae, ultricies congue
gravida diam non fringilla.

Passer par
...pour une tasse de café, ou autre.

Chicago, États-Unis

+00 1515151515

test@[Link]

Contact
ENTRER EN CONTACT

Nom
 Nom
Sujet
Envoyer

Essayez-le vous-même »

Images de grands héros

« Image de héros » est un terme utilisé pour un type spécifique de bannière
Web.

Une image de héros est une grande image placée au début d'une page Web.
Elle se compose souvent d'une image et d'un texte, et peut être statique ou
constituée d'une liste d'images tournantes.

Le but d’une image de héros est de présenter le contenu le plus important du

site Web.
Voile
Présenté par le capitaine Crochet

Bienvenue sur mon site de voile

La voile consiste à propulser un navire au moyen de voiles et à le diriger sur
l'eau, la glace ou la terre, selon le type de navire. Un marin gère la force du
vent sur les voiles en ajustant leur angle par rapport au navire en mouvement
et parfois en ajustant la surface de la voile. La force transmise par les voiles
est résistée par les forces de la coque, de la quille et du gouvernail d'un
navire à voile, par les forces des patins pour un bateau à glace et par les
forces des roues pour un navire à voile terrestre pour permettre de maintenir
un cap sur une allure par rapport au vent réel. (Wikipedia)

Essayez-le vous-même »

Page unique
La tendance en matière de conception Web passe du clic classique au
défilement vertical.

Le défilement permet aux utilisateurs de voir tout le contenu Web sur une
seule page.

Cette technique de page unique a été utilisée par les réseaux sociaux
pendant longtemps, jusqu'à ce que quelqu'un découvre qu'elle convenait
également à d'autres pages.

Essayez-le vous-même »

Étude de cas [Link]

❮ PrécédentSuivant ❯
Créer un site Web réactif à partir de
zéro
Dans ce chapitre, nous allons créer un site Web réactif [Link] à partir de
zéro.

Tout d’abord, commencez par une page HTML simple, avec une fenêtre
d’affichage initiale et un lien vers [Link].

Exemple
<!DOCTYPE html>
<html lang="en">
<title>[Link] Case</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
.css">

<body>
<h1>My first [Link] website!</h1>
<p>This site will grow as we add more ...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

Essayez-le vous-même »

Mettre les éléments dans des

conteneurs
Pour ajouter des marges et un remplissage communs, placez les éléments
HTML dans des conteneurs (<div class="w3-container">)

Séparez l'en-tête du reste du contenu en utilisant deux éléments <div>

distincts :

Exemple
<div class="w3-container">
<h1>My First [Link] Website!</h1>
<p>This site will grow as we add more ...</p>
</div>

<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Essayez-le vous-même »

PUBLICITÉ

Classes de couleurs
Les classes de couleurs définissent la couleur des éléments.

Cet exemple ajoute une couleur au premier élément <div> :

Exemple
<div class="w3-container w3-light-grey">
<h1>My First [Link] Website!</h1>
<p>This site will grow as we add more ...</p>
</div>

<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Essayez-le vous-même »

Classes de taille
Les classes de taille définissent la taille du texte pour les éléments.

Cet exemple ajoute une taille aux deux éléments d’en-tête :

Exemple
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My First [Link] Website!</h1>
 <p class="w3-xxlarge">This site will grow as we add
more ...</p>
</div>

<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Essayez-le vous-même »

Utiliser des éléments sémantiques

Si vous souhaitez suivre les recommandations sémantiques HTML5, faites-le !

Cela n'a pas d'importance pour [Link] si vous utilisez <div> ou <header>.

Exemple
<!DOCTYPE html>
<html lang="en">
<title>[Link] Case</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
.css">
<body>

<header class="w3-container w3-light-grey">

<h1 class="w3-jumbo">My first [Link] website!</h1>
<p class="w3-xxlarge">This site will grow as we add
more ...</p>
</header>

<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

<footer class="w3-container">
<p>This is my footer</p>
</footer>

</body>
</html>

Essayez-le vous-même »
Mise en page réactive multicolonne
Avec [Link], il est facile de créer une mise en page réactive multicolonne.

Les colonnes se réorganiseront automatiquement lorsqu'elles seront

visualisées sur différentes tailles d'écran.

Quelques règles de grille :

 Commencez par une classe de ligne <div class="w3-row-padding">

 Utilisez des classes prédéfinies comme « w3-third » pour créer
rapidement des colonnes de grille
 Placez votre contenu textuel à l'intérieur des colonnes de la grille

Cet exemple montre comment créer trois colonnes de largeur égale :

Exemple
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Essayez-le vous-même »

Cet exemple montre comment créer quatre colonnes de largeur égale :

Exemple
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
 </div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Essayez-le vous-même »

Colonnes de différentes largeurs

Cet exemple crée une mise en page à trois colonnes où la colonne du milieu
est plus large que la première et la dernière colonne :

Exemple
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Essayez-le vous-même »
Barres de navigation
Une barre de navigation est un en-tête de navigation placé en haut de la
page.

Exemple
<nav class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</nav>

Essayez-le vous-même »

Navigation latérale
Avec la navigation latérale, vous avez plusieurs options :

 Afficher toujours le volet de navigation à gauche du contenu de la page.

 Utilisez une navigation latérale réactive, pliable et « entièrement
automatique ».
 Ouvrir le volet de navigation sur la partie gauche du contenu de la
page.
 Ouvrir le volet de navigation sur tout le contenu de la page.
 Faites glisser le contenu de la page vers la droite lors de l'ouverture du
volet de navigation.
 Afficher le volet de navigation sur le côté droit au lieu du côté gauche

Cet exemple ouvre le volet de navigation sur la partie gauche du contenu de

la page :

<nav class="w3-sidebar w3-bar-block w3-black w3-

card" style="display:none" id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a class="w3-bar-item w3-button" href="#">Link 2</a>
<a class="w3-bar-item w3-button" href="#">Link 3</a>
</nav>

JavaScript utilisé pour ouvrir et masquer le menu :

function w3_open() {
[Link]("mySidebar").[Link] = "block";
}
function w3_close() {
[Link]("mySidebar").[Link] = "none";
}

Essayez-le vous-même »

Conception
matérielle [Link]
❮ PrécédentSuivant ❯

Conception matérielle
Material Design a été conçu par Google en 2014 et a ensuite été adopté dans
de nombreuses applications Google.

Material Design utilise des éléments qui rappellent le papier et l'encre. De

plus, les éléments présentent des ombres réalistes et des effets de survol.
Conception matérielle de Google

Aspect de Material Design avec

[Link]
[Link] est la feuille de style parfaite pour concevoir des applications avec un
look « Material Design » :

TÉLÉCHARGEMENTS

Aujourd'hui
X

[Link]

[Link]

Afficher dans le dossier

Hier

[Link]

[Link]

Afficher dans le dossier

[Link]

[Link]

Afficher dans le dossier

Essayez-le vous-même

PUBLICITÉ

Aspect Material Design (Thèmes de

couleurs)

Lieux à visiter
Cinque Terre
Les Cinque Terre (cinq terres) sont une partie de la Riviera italienne. Le
littoral, qui comprend cinq villages : Monterosso, Vernazza, Corniglia,
Manarola et Riomaggiore, est inscrit au 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, sur la Riviera de La Spezia. C'est le village le plus au
nord des Cinque Terre.
Vernazza
Vernazza est une autre des cinq villes de la région. Vernazza est la quatrième
ville en allant vers le nord. Il n'y a pas de circulation automobile et c'est l'un
des plus authentiques « villages de pêcheurs » de la Riviera italienne.

Europe Italie

Essayez-le vous-même

Aspect de Material Design (barres de

navigation)
Barre d'état :
12h30

Barre d'outils :
Titre
Barre d'onglets / Barre de recherche :
Lien 1Lien 2Lien 3Lien 4

Tous ensemble maintenant :

 12h30
Titre
Lien 1Lien 2Lien 3Lien 4

Essayez-le vous-même

Material Design Look (cartes

colorées)

Sport

Nouvelles

Musique
❮ PrécédentSuivant ❯

Validation [Link]
❮ PrécédentSuivant ❯

Validation CSS
Le service de validation CSS W3C peut être utilisé pour vérifier l'exactitude
(validité) de [Link].

Le service de validation a été créé par le W3C pour aider les développeurs
Web à valider CSS.

Avertissements de validation
Le validateur CSS W3C vérifie les propriétés CSS1, CSS2, CSS3 et CSS4.

Certains navigateurs utilisent des extensions de fournisseurs pour

simuler les propriétés CSS3 et CSS4.

Les extensions de fournisseur peuvent créer des avertissements dans le

processus de validation CSS W3.

Extensions de fournisseurs
[Link] utilise des extensions de fournisseurs pour prendre en charge les
navigateurs plus anciens.

Les fournisseurs de navigateurs s’efforcent de cesser d’utiliser des préfixes

dans les futures versions des navigateurs.

D'ici là, certaines extensions devront être utilisées pour faire fonctionner le
CSS moderne dans tous les navigateurs.
Vous trouverez ci-dessous une liste des extensions de fournisseurs les plus
couramment utilisées :

Extension Navigateur

-webkit- Chrome, Safari, Opera

-moz- Firefox

-o- Anciennes versions d'opéra

-MS- Microsoft Edge et Internet Explorer

❮ PrécédentSuivant ❯

Versions de [Link]
❮ PrécédentSuivant ❯
[Link] est sorti en 2017.

La dernière version est [Link] 4.15 décembre 2020.

La dernière version peut être téléchargée à partir de [Link] Downloads .

La version 4 est la feuille de style par défaut utilisée dans toutes les pages de
W3Schools.

[Link] - Pro
[Link] est livré avec une version professionnelle : [Link] .
La version pro est plus petite et plus rapide car elle n'a pas de couleurs
définies.

La version pro est conçue pour utiliser des thèmes ou d'autres classes de
couleurs fournies par le développeur.

La version pro peut être téléchargée à partir

de : [Link]

Modèle [Link] Pro

Noir
Rouge
Sarcelle
Essayez-le vous-même

Couleurs [Link] Pro

Avec [Link] pro vous pouvez définir vos propres couleurs :

Exemple
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
[Link]">

<!-- Colors here -->

<body>

<!-- Content here -->

</body>
</html>

Vous pouvez définir vos couleurs en ligne avec une balise <style> :

Exemple
<style>
.w3-amber{color:#000!important;background-color:#ffc107!
important}
</style>

Essayez-le vous-même »

Ou vous pouvez charger vos propres thèmes :

Exemple
<link rel="stylesheet" href="/lib/[Link]">

Essayez-le vous-même »

Ou vous pouvez charger vos bibliothèques de couleurs :

Exemple
<link rel="stylesheet" href="/lib/[Link]">

Essayez-le vous-même »

Exemple
<link rel="stylesheet" href="/lib/[Link]">

Essayez-le vous-même »
[Link] – Création d'une
application mobile
❮ PrécédentSuivant ❯

Films 2014

Congelé
La réponse aux animations était ridicule.

Nos étoiles contraires

Touchant, captivant et vraiment bien fait.

Les Vengeurs
Un énorme succès pour Marvel et Disney.
Pied de page

Créer une page mobile basique

La version pro de [Link] est parfaite pour les applications mobiles. Elle est
petite et très rapide.

Exemple
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
[Link]">
<body>

<!-- Content here -->

</body>
</html>

Essayez-le vous-même »

PUBLICITÉ

Ajouter du contenu
Exemple (en utilisant des éléments HTML
classiques)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>

<div class="w3-cell-row">
<div class="w3-cell">
<img src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
 </div>
</div>

<div class="w3-container">
<h3>Footer</h3>
</div>

Essayez-le vous-même »

Exemple (en utilisant des éléments HTML

sémantiques)
<header class="w3-container">
<h1>Header</h1>
</header>

<div class="w3-cell-row">
<div class="w3-cell">
<img src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>

<footer class="w3-container">
<h3>Footer</h3>
</footer>

</body>
</html>

Essayez-le vous-même »

Ajouter un thème de couleur

Exemples
<link rel="stylesheet" href="[Link]
[Link]">
<link rel="stylesheet" href="[Link]
[Link]">

Essayez-le vous-même »
En savoir plus sur les thèmes de couleurs dans Thèmes de couleurs [Link] .
Ajoutez plus de style
Exemple
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">

<h3 class="w3-text-theme">Frozen</h3>

Essayez-le vous-même »

Ajouter une navigation latérale

x

FilmsAmisMessages
Exemple
<nav class="w3-sidebar w3-bar-block w3-card" style="width:30%">
<div class="w3-red">
<a href="javascript:void(0)" onclick="closeSidebar()"
class="w3-button w3-display-topright w3-xlarge">X</a>
<div class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
</div>
</div>
<a class="w3-bar-item w3-button" href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a class="w3-bar-item w3-button" href="#">Messages</a>
</nav>

<script>
function openSidebar() {
[Link]("mySidebar").[Link] = "block";
}

function closeSidebar() {
[Link]("mySidebar").[Link] = "none";
}
</script>

Essayez-le vous-même »
Navigation fixe, en-tête et pied de
page
Exemple
<header class="w3-top">

<nav class="w3-top">

<footer class="w3-bottom">

Essayez-le vous-même »

Classes de couleurs [Link]

❮ PrécédentSuivant ❯

Couleurs par défaut de [Link]

La classe de couleur par défaut utilisée dans [Link] est inspirée de Material
Design.

Les couleurs de Material Design reflètent les couleurs utilisées dans le

marketing, la signalisation routière et les notes autocollantes.

Exemple
<div class="w3-red">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Interface utilisateur plate

Flat UI est une autre classe de couleur populaire qui peut être utilisée dans
[Link] :

Exemple
<div class="w3-flat-turquoise">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Vous pouvez en savoir plus sur les classes de couleurs alternatives dans les
prochains chapitres de ce tutoriel.

PUBLICITÉ

Interface utilisateur Windows Metro

Metro est le surnom de Microsoft Design Language (MDL).
Metro se concentre sur la typographie, les icônes simplifiées et les couleurs
modernes.

Cet exemple montre comment utiliser les couleurs Windows Metro dans
[Link] :

Exemple
<div class="w3-metro-light-green">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Windows 8
Windows 8 a été le premier système d'exploitation majeur axé sur un design
plat et des couleurs modernes.

Cet exemple montre comment utiliser les couleurs Windows 8 dans [Link] :

Exemple
<div class="w3-win8-lime">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

❮ PrécédentSuivant ❯
Couleurs [Link]
❮ PrécédentSuivant ❯

Classes de couleurs par défaut de

[Link]
La classe de couleur par défaut utilisée dans [Link] est inspirée de Material
Design.

Les couleurs de Material Design reflètent les couleurs utilisées dans le

marketing, la signalisation routière et les notes autocollantes.

Les classes de couleurs [Link] suivantes peuvent être utilisées sur n’importe
quel élément HTML :

w3-rouge

w3-rose

w3-violet

w3-violet-foncé

w3-indigo

w3-bleu

w3-bleu-clair

w3-cyan

w3-aqua

w3-sarcelle

w3-vert

w3-vert-clair

w3-citron vert

w3-sable
w3-kaki

w3-jaune

w3-ambre

w3-orange

w3-orange-foncé

w3-bleu-gris

w3-marron

w3-gris-clair

w3-gris

w3-gris-foncé

w3-noir

w3-rouge pâle

w3-jaune-pâle

w3-vert-pâle

w3-bleu-pâle

PUBLICITÉ

Classes de couleurs de texte [Link]

Les classes de couleurs de texte [Link] suivantes peuvent être utilisées sur
n'importe quel élément HTML :

Sur le noir
w3-texte-rouge

w3-texte-rose

w3-texte-violet
w3-texte-violet-foncé

w3-texte-indigo

w3-texte-bleu

w3-texte-bleu-clair

w3-texte-cyan

w3-texte-aqua

w3-texte-sarcelle

w3-texte-vert

w3-texte-vert-clair

w3-texte-lime

w3-texte-sable

w3-texte-kaki

w3-texte-jaune

w3-texte-ambre

w3-texte-orange

w3-texte-orange-foncé

w3-texte-bleu-gris

w3-texte-marron

w3-texte-gris-clair

w3-texte-gris

w3-texte-gris-foncé

w3-texte-noir

w3-texte-blanc

Sur Gris
w3-texte-rouge
w3-texte-rose

w3-texte-violet

w3-texte-violet-foncé

w3-texte-indigo

w3-texte-bleu

w3-texte-bleu-clair

w3-texte-cyan

w3-texte-aqua

w3-texte-sarcelle

w3-texte-vert

w3-texte-vert-clair

w3-texte-lime

w3-texte-sable

w3-texte-kaki

w3-texte-jaune

w3-texte-ambre

w3-texte-orange

w3-texte-orange-foncé

w3-texte-bleu-gris

w3-texte-marron

w3-texte-gris-clair

w3-texte-gris

w3-texte-gris-foncé

w3-texte-noir

w3-texte-blanc
Sur blanc
w3-texte-rouge

w3-texte-rose

w3-texte-violet

w3-texte-violet-foncé

w3-texte-indigo

w3-texte-bleu

w3-texte-bleu-clair

w3-texte-cyan

w3-texte-aqua

w3-texte-sarcelle

w3-texte-vert

w3-texte-vert-clair

w3-texte-lime

w3-texte-sable

w3-texte-kaki

w3-texte-jaune

w3-texte-ambre

w3-texte-orange

w3-texte-orange-foncé

w3-texte-bleu-gris

w3-texte-marron

w3-texte-gris-clair

w3-texte-gris

w3-texte-gris-foncé
w3-texte-noir

w3-texte-blanc

Essayez-le vous-même »

Classes de couleurs de survol

Les classes de couleurs de survol [Link] suivantes peuvent être utilisées sur
n’importe quel élément HTML :

w3-hover-rouge

w3-hover-rose

w3-hover-violet

w3-hover-violet-foncé

w3-hover-indigo

w3-hover-bleu

w3-hover-bleu-clair

w3-hover-cyan

w3-hover-aqua

w3-hover-sarcelle

w3-hover-vert

w3-hover-vert-clair

w3-hover-citron vert

w3-hover-sable

w3-hover-kaki

w3-hover-jaune

w3-hover-ambre

w3-hover-orange
w3-hover-orange-foncé

w3-hover-bleu-gris

w3-hover-marron

w3-hover-gris-clair

w3-hover-gris

w3-hover-gris-foncé

w3-hover-noir

w3-hover-rouge-pâle

w3-hover-jaune-pâle

w3-hover-vert-pâle

w3-hover-bleu-pâle

Couleurs plates de
l'interface
utilisateur [Link]
❮ PrécédentSuivant ❯

Interface utilisateur plate

Un autre jeu de couleurs populaire qui peut être utilisé dans [Link] est Flat
UI :

Exemple
<div class="w3-flat-emerald">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Essayez-le vous-même » Télécharger le CSS »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-plat-turquoise
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-plat-vert-mer
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-plat-émeraude
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

W3-Néphrite plate
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le
w3-flat-peter-river
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-flat-belize-trou
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-plat-améthyste
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-glycine-plate
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-asphalte-mouillé-plat
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le
w3-flat-bleu-nuit
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-flat-tournesol
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-orange-plat
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-carotte-plate
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-flat-citrouille
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le
w3-plat-alizarine
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-plat-grenade

PUBLICITÉ

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-nuages-plats
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-plat-argent
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-béton-plat
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-flat-amiante

Couleurs de l'interface
utilisateur Metro [Link]
❮ PrécédentSuivant ❯

Interface utilisateur Windows Metro

Metro est le surnom de Microsoft Design Language (MDL).

Metro se concentre sur la typographie, les icônes simplifiées et les couleurs

modernes.

Cet exemple montre comment utiliser les couleurs Windows Metro avec
[Link] :

Exemple
<div class="w3-metro-light-green">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même » Télécharger le CSS »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le
w3-metro-vert-clair
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-vert
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-vert-foncé
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-métro-magenta

PUBLICITÉ

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-clair-violet
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-violet
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-violet-foncé
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-obscurcir
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-sarcelle
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-bleu-clair
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-bleu
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-bleu-foncé
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-jaune
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

W3-métro-orange
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-orange-foncé
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-rouge
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-metro-rouge-foncé

Couleurs Windows [Link]

❮ PrécédentSuivant ❯
Windows 8 a été le premier système d'exploitation majeur axé sur un design
plat et des couleurs modernes.

Cette page vous montre comment utiliser les couleurs Windows avec [Link].

Exemple
<div class="w3-win8-lime">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même » Télécharger le CSS »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-lime
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-vert
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-émeraude
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-sarcelle

PUBLICITÉ

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-cyan
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-bleu
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-indigo
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-cobalt
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-violet
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-rose
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-magenta
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-crimson
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-rouge
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-orange
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-ambre
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-jaune
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-marron
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-olive
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-acier
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-mauve
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-taupe
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-win8-sienne

Couleurs [Link] pour iOS

❮ PrécédentSuivant ❯
Exemple
<div class="w3-ios-dark-blue">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même » Télécharger le CSS »

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-bleu-foncé
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le
w3-ios-bleu-profond
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-bleu
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-bleu-clair

PUBLICITÉ

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-vert
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-rose
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-rouge
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-orange
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-jaune
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-gris
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

w3-ios-gris-clair
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Essayez-le

Contexte de w3-ios

Couleurs de mode [Link]

❮ PrécédentSuivant ❯

Comment utiliser les couleurs

tendance
Les couleurs de mode sont faciles à utiliser. Ajoutez simplement un lien vers
la bibliothèque de couleurs appropriée :

<link rel="stylesheet" href="[Link]

[Link]">

Ensuite, ajoutez un nom de classe à l’élément HTML que vous souhaitez

colorer :

Exemple
<div class="w3-2021-marigold">Marigold</div>
<div class="w3-2021-cerulean">Cerulean</div>
<div class="w3-2021-rust">Rust</div>

Essayez-le vous-même » Télécharger le CSS »

Les couleurs mode sont sélectionnées parmi Colors 2021 .

Les couleurs les plus tendance du

printemps/été 2021
Souci
Azuré
Rouiller
Éclairant
Bleu Français
Frêne vert
Corail brûlé
Menthe
Orchidée Améthyste
Sorbet à la Framboise

Couleurs classiques printemps/été

2021
Exemple
<div class="w3-2021-inkwell">Inkwell</div>
<div class="w3-2021-ultimate-gray">Ultimate Gray</div>
<div class="w3-2021-buttercream">Buttercream</div>

Essayez-le vous-même » Télécharger le CSS »

Encrier
Gris ultime
Crème au beurre
Brume du désert
Saule

Les couleurs les plus tendance du

printemps/été 2020
Exemple
<div class="w3-2020-flame-scarlet">Flame Scarlet</div>
<div class="w3-2020-saffron">Saffron</div>
<div class="w3-2020-biscay-green">Biscay Green</div>

Essayez-le vous-même » Télécharger le CSS »

Flamme écarlate
Safran
Vert Biscaye
Ciboulette
Jean délavé
Écorce d'orange
Mosaïque Bleue
Soleil
Rose corail
Bâton de cannelle
Compote de raisin

PUBLICITÉ
Couleurs classiques printemps/été
2020
Exemple
<div class="w3-2020-lark">Lark</div>
<div class="w3-2020-navy-blazer">Navy Blazer</div>
<div class="w3-2020-brilliant-white">Brilliant
White</div> <div class="w3-2020-ash">Ash</div>

Essayez-le vous-même » Télécharger le CSS »

Alouette
Blazer bleu marine
Blanc brillant
Cendre

Couleurs automne/hiver 2020

Ambre
Samba
Grès
Bleu classique
Éclat vert
Rose bronzée
Vert outremer
Brique cuite
Nougat à la pêche
Magenta Violet

Couleurs de la mode printemps 2019

Exemple
<div class="w3-2019-fiesta">Fiesta</div>
<div class="w3-2019-princess-blue">Princess Blue</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Fête
Bouffon Rouge
Curcuma
Corail vivant
Paon rose
Tige de poivre
Tremble d'or
Princesse Bleue
Caramel au beurre
Mojito à la mangue
Mousse pour terrarium
Lilas doux
Soja
Éclipse
Maïs doux
Granit brun

Couleurs de la mode automne 2019

Exemple
<div class="w3-2019-chili-pepper">Chili Pepper</div>
<div class="w3-2019-dark-cheddar">Dark Cheddar</div>
<div class="w3-2019-bluestone">Bluestone</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Piment
Vélo rouge
Crème de pêche
Rose pêche
Chemin rocailleux
Colombe fruitière
Amande sucrée
Cheddar noir
Bleu Galaxie
Pierre bleue
Tigre orange
Eden

Couleurs classiques automne/hiver

2019
Crème anglaise à la vanille
Bleu du soir
Paloma
Guacamole
Les couleurs mode sont sélectionnées parmi Colors 2019 .

Couleurs de la mode 2018

w3-2018-poire-rouge

w3-2018-vaillant-coquelicot

w3-2018-nebuleuses-bleu

w3-2018-ceylan-jaune

w3-2018-martini-olive
w3-2018-roux-orange

w3-2018-ultra-violet

w3-2018-petales-de-crocus

w3-2018-lumière du jour

w3-2018-quetzal-vert

w3-2018-mer-des-sargasses

w3-2018-tofu

w3-2018-amande-buff

w3-2018-gris-calme

w3-2018-suricate

w3-2018-l'Arche des prés

w3-2018-tomate-cerise

w3-2018-petit-garcon-bleu

w3-2018-huile-de-piment

w3-2018-dahlia-en-fleurs

w3-2018-arcadie

w3-2018-empereur-rose

w3-2018-presque-mauve

w3-2018-crocus-de-printemps

w3-2018-punch-au-citron-vert

w3-2018-bleu-marin

w3-2018-brume-portuaire

w3-2018-sable-chaud
 w3-2018-lait-de-coco

Exemple
<div class="w3-2018-ultra-violet">Ultra Violet</div>
<div class="w3-2018-cherry-tomato">Cherry Tomato</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Les couleurs mode sont sélectionnées parmi Colors 2018 .

Couleurs de la mode 2017

w3-2017-verdure

w3-2017-grenadine

w3-2017-port-fauve

w3-2017-chaussons-de-ballet

w3-2017-butterum

w3-2017-marine-pivoine

w3-2017-gris-neutre

w3-2017-épinette-ombragée
w3-2017-citron-doré

w3-2017-marina

w3-2017-automne-érable

w3-2017-niagra

w3-2017-jaune-primevère

w3-2017-lapis-bleu

w3-2017-flamme

w3-2017-île-paradisiaque

w3-2017-cornouiller-pâle

w3-2017-achillée-rose

w3-2017-chou frisé
 w3-2017-noisette

Exemple
<div class="w3-2017-greenery">Greenery</div>
<div class="w3-2017-flame">Flame</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Les couleurs mode sont sélectionnées parmi Colors 2017 .

Bibliothèques de
couleurs [Link]
❮ PrécédentSuivant ❯

Bibliothèques de couleurs
Les bibliothèques de couleurs sont de petits fichiers CSS contenant des
valeurs de couleurs couramment utilisées telles que les normes de sécurité,
les couleurs des autoroutes, les couleurs de la mode, les couleurs de
camouflage, etc.

Autobus scolaire
Promenade Falcon Ridge
ARRÊT

Comment utiliser les bibliothèques

de couleurs
Les bibliothèques de couleurs sont faciles à utiliser. Ajoutez simplement un
lien vers la bibliothèque de couleurs sur votre page Web :

<link rel="stylesheet" href="[Link]

[Link]">

Ensuite, ajoutez un nom de classe à l’élément HTML que vous souhaitez

colorer :

<div class="w3-highway-schoolbus">Schoolbus</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>

Essayez-le vous-même »

Couleurs des autoroutes américaines

Autoroute W3-marron

W3-autoroute-rouge

autoroute w3-orange

Autobus scolaire w3-highway

w3-autoroute-jaune

autoroute w3-verte

w3-autoroute-bleu

Exemple
<div class="w3-highway-red">STOP</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Les couleurs des autoroutes sont définies dans la norme fédérale 595 .

Couleurs de sécurité américaines

w3-sécurité-rouge

w3-sécurité-orange

w3-sécurité-jaune

w3-sécurité-vert

w3-sécurité-bleu

w3-sécurité-violet

Exemple
<div class="w3-safety-red">DANGER</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Les couleurs de sécurité américaines sont définies dans la norme fédérale

595 .
Couleurs des signaux européens
w3-signal-jaune

w3-signal-orange

w3-signal-rouge

w3-signal-violet

w3-signal-bleu

w3-signal-vert

w3-signal-gris

w3-signal-marron

w3-signal-blanc

w3-signal-noir

Exemple
<div class="w3-signal-red">Stop</div>
<div class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Les couleurs de signalisation européennes sont définies dans la norme de

couleurs RAL .

Couleurs vives
w3-rose-vif

w3-rouge-vif

w3-orange-vif

w3-jaune-vif

w3-vert-vif

w3-bleu-vif

w3-violet-vif

w3-violet-vif

w3-noir-vif
w3-blanc-vif

w3-rose-jaunâtre-vif

w3-orange-rougeâtre-vif

w3-orange-vif-jaune

w3-jaune-vert-vif

w3-jaune-vif-vert

w3-jaune-vif-vert

w3-vert-bleuté-vif

w3-bleu-vert-vif

w3-bleu-violacé-vif

w3-violet rougeâtre vif

w3-rouge-violacé-vif
Exemple
<div class="w3-vivid-red">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Essayez-le vous-même » Télécharger le CSS »

Les couleurs vives sont définies dans ISCC-NBS .

Colorants alimentaires
w3-nourriture-pomme

w3-nourriture-asperges

w3-nourriture-abricot

w3-nourriture-aubergine

w3-nourriture-avocat

w3-nourriture-banane

w3-nourriture-beurre

w3-nourriture-myrtille
w3-nourriture-cerise

w3-nourriture-chocolat

w3-nourriture-canneberge

w3-nourriture-café

w3-nourriture-oeuf

w3-nourriture-raisin

w3-nourriture-kiwi

w3-nourriture-citron

w3-nourriture-citron vert

w3-nourriture-mangue

w3-nourriture-champignon

w3-nourriture-moutarde
w3-nourriture-menthe

w3-nourriture-olive

w3-nourriture-orange

w3-nourriture-pois

w3-nourriture-pêche

w3-nourriture-poire

w3-nourriture-pistache

w3-nourriture-prune

w3-nourriture-framboise

w3-food-safran

w3-nourriture-saumon

w3-nourriture-menthe verte
 w3-nourriture-courge

w3-nourriture-fraise

w3-nourriture-tomate

w3-alimentaire-blé

w3-nourriture-vin

Exemple
<div class="w3-food-apple">Apple</div>
<div class="w3-food-banana">Banana</div>

Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Couleurs de camouflage
w3-camo-marron

w3-camo-rouge

w3-camouflage-olive

w3-camouflage-champ
 w3-camo-terre

w3-camo-sable

w3-camo-tan

w3-camo-grès

w3-camo-vert-foncé

w3-camo-forêt

w3-camo-vert-clair

w3-camo-vert

w3-camo-gris-foncé

w3-camo-gris

w3-camo-noir

Exemple
<div class="w3-camo-earth">Camouflaged Truck</div>
<div class="w3-camo-grey">Camouflaged Ship</div>
Essayez-le vous-même » Tout essayer » Télécharger le CSS »

Les couleurs de camouflage sont définies dans la norme fédérale 595 .

Schémas de
couleurs [Link]
❮ PrécédentSuivant ❯

Schémas de couleurs
Les couleurs utilisées dans la conception d'un site Web sont souvent appelées
une palette de couleurs :

#7e9a9a #f6d8ac #db9833 #2a6592 #8ec3eb

Le but d’une palette de couleurs est de créer une sensation esthétique de

style et d’attrait.

Monochromatique
 Analogue

Complémentaire
En savoir plus sur les combinaisons de couleurs...

Schémas de couleurs achromatiques

Le schéma de couleurs achromatiques noir sur blanc est le schéma de
couleurs par défaut pour une page Web :

Il utilise un fond blanc avec un texte noir.

Le schéma de couleurs achromatiques blanc sur noir est souvent préféré pour
les appareils plus petits :

Il utilise un fond noir avec un texte blanc.

Le blanc sur noir nécessite moins d’énergie (améliore la durée de vie de la

batterie) sur la plupart des technologies d’affichage.

Schémas de couleurs
monochromatiques
Les schémas de couleurs monochromes utilisent une seule couleur avec
différents ajouts de noir, de gris et de blanc.
Le schéma de couleurs ci-dessus a été généré par le générateur de couleurs
[Link] .

Les combinaisons de couleurs monochromes ont souvent une énergie plus

subtile et paisible, en particulier avec des couleurs bleues ou vertes.

Dans le chapitre Thèmes de couleurs [Link], vous trouverez de nombreux

thèmes de couleurs monochromes.

Vous pouvez en savoir plus sur les schémas de couleurs dans le

chapitre Schémas de couleurs de notre didacticiel sur les couleurs .

Schémas de couleurs Flat Design

La théorie du flat design est abordée dans le chapitre Tendances [Link] .
Les couleurs jouent un rôle important dans le design plat. Les schémas de
couleurs du design plat utilisent souvent plus de couleurs que les schémas de
couleurs traditionnels.

Les schémas de couleurs utilisés dans [Link] sont inspirés de Google

Material Design :

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Rouge

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Vert

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Orange

Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 9 millions d'habitants.

Bleu Gris

Plus de combinaisons de couleurs Flat Design...

❮ PrécédentSuivant ❯

Thèmes de couleurs [Link]

❮ PrécédentSuivant ❯

Thèmes de couleurs
Avec [Link], il est facile de personnaliser vos applications avec des thèmes
de couleurs.

Films 2014
 Congelé

La réponse aux animations était ridicule

 Nos étoiles contraires

Touchant, captivant et vraiment bien fait

 Les Vengeurs
Un énorme succès pour Marvel et Disney

«»
Films 2014
 Congelé

La réponse aux animations était ridicule

 Nos étoiles contraires

Touchant, captivant et vraiment bien fait

 Les Vengeurs
Un énorme 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="[Link]
[Link]">
<link rel="stylesheet" href="[Link]
[Link]">

Essayez-le vous-même »

Thèmes prédéfinis
Voici les thèmes prédéfinis dans [Link] :

thème w3-rouge Essayez-le

thème w3-rose Essayez-le

thème w3-violet Essayez-le

thème w3-violet-foncé Essayez-le

thème w3-indigo Essayez-le

thème w3-bleu Essayez-le

thème w3-bleu-clair Essayez-le

thème w3-cyan Essayez-le

w3-theme-bleu-sarcelle Essayez-le

thème w3-vert Essayez-le

thème w3-vert-clair Essayez-le

thème w3-lime Essayez-le

thème w3-kaki Essayez-le

thème w3-jaune Essayez-le

w3-theme-ambre Essayez-le

thème w3-orange Essayez-le

thème w3-orange-foncé Essayez-le

 thème w3-bleu-gris Essayez-le

thème w3-marron Essayez-le

thème w3-gris Essayez-le

thème w3-gris-foncé Essayez-le

thème w3-noir Essayez-le

thème w3-w3schools Essayez-le

PUBLICITÉ

Ajout de dégradés
Un lecteur nous a envoyé cette suggestion : Vous pourriez 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%)}

Essayez-le vous-même »
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 Description

thè[Link] Thème de couleur Ambre

thè[Link] Thème de couleur Noir

thème [Link] Thème de couleur Bleu

thè[Link] Thème de couleur Bleu Gris

thè[Link] Thème de couleur Marron

Thème [Link] Thème de couleur Cyan

Thème w3 gris foncé.css Thème de couleur Gris foncé

Thème w3-orange-foncé.css Thème de couleur Orange foncé

Thème w3 violet foncé.css Thème de couleur violet foncé

thè[Link] Thème de couleur Vert

thè[Link] Thème de couleur Gris

thè[Link] Thème de couleur Indigo

thè[Link] Thème de couleur Kaki

Thème w3 bleu [Link] Thème de couleur bleu clair

Thème w3 vert [Link] Thème de couleur Vert clair

thè[Link] Thème de couleur Citron vert

thè[Link] Thème de couleur Orange

thè[Link] Thème de couleur rose

thème [Link] Thème de couleur violet

thè[Link] Thème de couleur Rouge

[Link] Thème de couleur bleu sarcelle

thème [Link] Thème de couleur Jaune

Générateur de
couleurs [Link]
❮ PrécédentSuivant ❯

Avec ce générateur de couleurs, vous pouvez créer vos propres thèmes

privés.

Saisissez une couleur dans la case jaune ci-dessous ou sélectionnez une

couleur parmi les couleurs de l'année.

Créer un thème
Couleurs de l'année Lait de coco 2018 Sable chaud 2018 Brume du port
2018 Bleu marin 2018 Punch au citron vert 2018 Crocus de printemps
2018 2018 Presque Mauve Ultra Violet 2018 Empereur 2018 Arcadie
2018 Dahlia en fleurs 2018 Lavande rose 2018 Huile de piment 2018
Petit Garçon Bleu 2018 Tomate cerise 2018 Sturnelle des prés 2018
Suricate 2018 Gris silencieux 2018 2018 Amande Buff Tofu 2018 Mer des
Sargasses 2018 Quetzal Vert 2018 Coup de projecteur 2018 Pétale de
crocus 2018 Orange Russet 2018 Martini Olive 2018 Jaune Ceylan 2018
2018 Nébuleuses Bleues Coquelicot vaillant 2018 Poire rouge 2018
Noisette 2017 Chou frisé 2017 Millefeuille rose 2017 Cornouiller pâle
2017 2017 Île paradisiaque Flamme 2017 Bleu Lapis 2017 2017
Primevère Jaune Niagara 2017 Érable d'automne 2017 Marina 2017
Citron vert doré 2017 Épinette ombragée 2017 Gris neutre 2017 Pivoine
marine 2017 Beurre 2017 Chaussons de ballet 2017 Porto Tawny 2017
Grenadines 2017 Verdure 2017 Bord de la rivière 2016 Bleu Aérien 2016
Peau de requin 2016 Rouge Aurora 2016 Taupe chaud 2016 Cèdre
poussiéreux 2016 2016 Lush Medow Moutarde épicée 2016 2016 Argile
de potier 2016 Bodacious 2016 Rosé Quarts Sérénité 2016 Écho de
pêche 2016 Tuba Bleu 2016 Coquille de patelle 2016 Gris Lilas 2016
Café glacé 2016 Fiesta 2016 Bouton d'or 2016 Flash vert 2016 Marsala
2015 Orchidée Radiand 2014 Émeraude 2013 Tango Tangerine 2012
Chèvrefeuille 2011 2010 Turquoise Mimosa 2009 Izis bleu 2008 Piment
2007 Dollar des sables 2006
Teinte - Teinte +
Assis - Sam +
Exemple de thèmes [Link]

Cinque Terre
Les Cinque Terre (cinq terres) sont une partie de la Riviera italienne. Le
littoral, qui comprend cinq villages : Monterosso, Vernazza, Corniglia,
Manarola et Riomaggiore, est inscrit au 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, sur la Riviera de La Spezia. C'est le village le plus au
nord des Cinque Terre.
Vernazza
Vernazza est une autre des cinq villes de la région des Cinque Terre.
Vernazza est la quatrième ville en allant vers le nord. Il n'y a pas de
circulation automobile et c'est l'un des plus authentiques « villages de
pêcheurs » de la Riviera italienne.

Tutoriel HTML Tutoriel

CSS Tutoriel
JavaScript Tutoriel
[Link] Tutoriel
Bootstrap
Référence HTML Référence
CSS Référence
JavaScript Référence
[Link]
Statistiques du navigateur
Exemples HTML
Exemples CSS
Exemples JavaScript Exemples
[Link] Exemples
HTML DOM

Pied de page

Thème créé
#fefbf5 thème w3-l5

#fcf2dc thème w3-l4

#f9e6ba thème w3-l3

 #f5d997 thème w3-l2

#f2cd75 thème w3-l1

#efc050 thème w3

#ecb535 thème w3-d1

#e9ab18 thème w3-d2

#ce9613 thème w3-d3

#b08010 thème w3-d4

#936b0e w3-theme-d5

Thème utilisé :
12h30

Films
+

Congelé
La réponse aux animations était ridicule.

La Guerre des étoiles

Les gens étaient impatients de voir le nouveau film Star Wars.
Les Vengeurs
Un énorme succès pour Marvel et Disney.

W3 Écoles 2016

«»

CSS généré :
.w3-theme-l5 { couleur : #000 !important ; couleur d'arrière-
plan : #fefbf5 !important }
.w3-theme-l4 { couleur : #000 !important ; couleur d'arrière-
plan : #fcf2dc !important }
.w3-theme-l3 { couleur : #000 !important ; couleur d'arrière-
plan : #f9e6ba !important }
.w3-theme-l2 { couleur : #000 !important ; couleur d'arrière-
plan : #f5d997 !important }
.w3-theme-l1 { couleur : #000 !important ; couleur d'arrière-
plan : #f2cd75 !important }
.w3-theme-d1 { couleur : #000 !important ; couleur d'arrière-
plan : #ecb535 !important }
.w3-theme-d2 { couleur : #000 !important ; couleur d'arrière-
plan : #e9ab18 !important }
.w3-theme-d3 { couleur : #fff !important ; couleur d'arrière-
plan : #ce9613 !important }
.w3-theme-d4 { couleur : #fff !important ; couleur d'arrière-
plan : #b08010 !important }
.w3-theme-d5 { couleur : #fff !important ; couleur d'arrière-
plan : #936b0e !important }

.w3-theme-light { couleur : #000 !important ; couleur d'arrière-

plan : #fefbf5 !important }
.w3-theme-dark { couleur : #fff !important ; couleur d'arrière-
plan : #936b0e !important }
.w3-theme-action { couleur : #fff !important ; couleur d'arrière-
plan : #936b0e !important }
.w3-theme { couleur : #000 !important ; couleur d'arrière-
plan : #efc050 !important }
.w3-text-theme { couleur : #efc050 !important }
.w3-border-theme { couleur de bordure : #efc050 !important }

.w3-hover-theme:hover { couleur : #000 !important ; couleur

d'arrière-plan : #efc050 !important }
.w3-hover-text-theme:hover { couleur : #efc050 !important }
.w3-hover-border-theme:hover { couleur de bordure : #efc050 !
important }

Thèmes privés
Avec [Link], il est facile de personnaliser une application avec un thème de
couleur privé.

Vous pouvez créer un lien vers un thème privé dans une balise <link>, ou
vous pouvez placer 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>

Essayez-le vous-même »