Résumé CSS vu en Web 1¶

Voici un résumé de ce que vous avez appris en CSS lors de votre cours de Web 1 la session dernière. Vous pouvez vous y référer lorsque vous aurez besoin de rafraîchir vos connaissances sur les bases du CSS.

Règle CSS¶

Une règle CSS est constituée d'un sélecteur CSS, d'accolades {…} et de tout ce qui se trouve entre elles.

Par exemple, voici une règle CSS simple :

p {
  font-size: 16px;
  font-family: Arial;
}

Sélecteur¶

Le sélecteur est ce qui se trouve avant l'accolade ouvrante.

Groupe de sélecteurs¶

Un groupe de sélecteurs est le nom donné lorsque plusieurs sélecteurs sont présents avant une accolade.

Par exemple :

.article p {
  font-size: 16px;
  font-family: Arial;
}

Info

Dans un groupe de sélecteurs, les sélecteurs sont lus de droite à gauche ⬅️.

Autrement dit, dans l'exemple précédent, le navigateur sélectionnerait en premier temps tous les paragraphes de la page. Ensuite, il ne garderait que ceux ayant un ancêtre possédant la classe .article.

Ancêtre¶

Le ou les ancêtres sont les sélecteurs séparés par un espace se trouvant à gauche du dernier sélecteur.

Par exemple :

<div class="article">
  <div class="intro">
    <p>Lorem ipsum</p>
  </div>
</div>

La classe .intro est le parent du paragraphe.
La classe .article est le grand-parent du paragraphe.
.intro et .article sont tous deux des ancêtres du paragraphe.

Info

Puisque les règles CSS sont lues de droite à gauche ⬅️, il n'est pas nécessaire de nommer tous les sélecteurs disponibles dans une règle CSS.

.article p { ... } sélectionnera tous les paragraphes à l'intérieur de l'élément avec la classe .article, même si .intro est omis.

Déclaration¶

Par exemple, le code suivant est une déclaration :

font-size: 16px;

Un bloc de déclaration peut en contenir plusieurs :

font-size: 16px;
font-family: Arial;

Propriété & Valeur¶

Chaque déclaration est constituée d'une propriété et d'une valeur.

Padding¶

La propriété padding définit l'espace entre le contenu et ses extrémités.

Par défaut, cette propriété a une valeur de 0.

Lorsqu'une seule valeur est fournie, celle-ci est appliquée aux 4 côtés de l'élément.

See the Pen CSS — padding by TIM Montmorency (@tim-momo) on CodePen.

Warning

La propriété padding n'accepte pas les valeurs négatives.

📖 Pour en savoir plus, consultez la page padding de MDN.

Sous-propriétés¶

padding-top
padding-right
padding-bottom
padding-left

Par exemple:

See the Pen CSS — padding sous-propriétés by TIM Montmorency (@tim-momo) on CodePen.

Syntaxe courte¶

See the Pen CSS — padding syntaxe courte by TIM Montmorency (@tim-momo) on CodePen.

Ratio à partir de %¶

Le ratio se base toujours sur la largeur de l'élément.

Afin d'obtenir un format 16/9, il suffit de ramener la valeur de hauteur de cette fraction en pourcentage, soit 9 ÷ 16 × 100% = 56.25% :

.element {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16/9 */
}

Cet élément sera donc toujours dans un format 16/9, peu importe la largeur de son parent.

Margin¶

La propriété margin définit un espace vide devant être respecté autour d'un élément — bref, une marge.

Par défaut, cette propriété a une valeur de 0.

Info

Contrairement à padding, margin accepte les valeurs négatives.

Lorsqu'une seule valeur est fournie, celle-ci est appliquée aux 4 côtés de l'élément.

Warning

Les éléments ayant un display: inline (span, a, etc.) ne sont pas affectés par les marges verticales ↕️ par défaut.

See the Pen CSS — margin by TIM Montmorency (@tim-momo) on CodePen.

Pour en savoir plus, consultez la page margin de MDN.

Sous-propriétés¶

margin-top
margin-right
margin-bottom
margin-left

See the Pen CSS by TIM Montmorency (@tim-momo) on CodePen.

Syntaxe courte¶

See the Pen CSS — margin syntaxe courte by TIM Montmorency (@tim-momo) on CodePen.

Syntaxe courte à deux valeurs¶

La première valeur : la marge verticale ↕️ (top et bottom)
La deuxième valeur : la marge horizontale ↔️ (left et right)

See the Pen CSS — margin syntaxe courte deux valeurs by TIM Montmorency (@tim-momo) on CodePen.

Alignement horizontal ↔️¶

Pour centrer horizontalement des éléments dans leur parent, il faut attribuer la valeur auto aux marges de gauche et de droite. Cette technique est généralement utilisée avec la syntaxe à deux valeurs : margin: 0 auto;

See the Pen CSS by TIM Montmorency (@tim-momo) on CodePen.

Errreur fréquente

Pour centrer horizontalement un élément avec margin: auto, l'élément doit être en display: block.

Background¶

La propriété background et ses différentes sous-propriétés permettent de contrôler l'apparence de l'arrière-plan d'un élément.

background-color¶

La propriété background-color permet de définir la couleur d'arrière-plan d'un élément.

background-image¶

La propriété background-image permet de définir une image d'arrière-plan. Elle accepte une ou plusieurs images et des fonctions permettant de générer un dégradé.

Info

Par défaut, l'image se répète pour couvrir l'ensemble de l'élément.

See the Pen CSS by TIM Montmorency (@tim-momo) on CodePen.

Dégradé¶

Il est possible de générer un dégradé à titre d'image d'arrière-plan en utilisant les fonctions CSS linear-gradient() et radial-gradient(). La première génère un dégradé linéaire, la deuxième un dégradé circulaire.

background-image: linear-gradient(#3FC774, #3C38BA);

See the Pen CSS by TIM Montmorency (@tim-momo) on CodePen.

Combinaison¶

Il est possible de donner plus d'une valeur d'image d'arrière-plan en séparant chaque valeur par une virgule.

background-image: url('dessus.jpg'), url('dessous.jpg');

Warning

La première valeur passée à background-image correspond à l'élément sur le dessus, et ainsi de suite.

See the Pen CSS — background-image by TIM Montmorency (@tim-momo) on CodePen.

background-repeat¶

La propriété background-repeat définit la façon dont une image en arrière-plan est répétée.

Valeurs disponibles :

repeat (par défaut)
no-repeat
repeat-x
repeat-y

repeat répète l'image aussi souvent que nécessaire pour couvrir l'ensemble de l'élément.

no-repeat indique au contraire de ne pas répéter l'image.

See the Pen CSS — background-repeat by TIM Montmorency (@tim-momo) on CodePen.

repeat-x répète uniquement sur l'axe des X ↔️.

repeat-y répète uniquement sur l'axe des Y ↕️.

See the Pen CSS — background-repeat by TIM Montmorency (@tim-momo) on CodePen.

background-position¶

La propriété background-position permet de définir la position d'un arrière-plan. Il est possible de définir deux valeurs correspondant à la position X et Y. Ces valeurs peuvent être n'importe quelle unité CSS (px, %, em, etc.), ainsi que des mots-clés (top, bottom, left, right, center).

background-position: 75% 25%;   /* 75% horizontalement, 25% verticalement */
background-position: center bottom; /* centré, en bas */

See the Pen CSS — background-position by TIM Montmorency (@tim-momo) on CodePen.

background-size¶

Par défaut, une image en arrière-plan s'affiche selon sa dimension réelle. La propriété background-size permet de contrôler cette dimension.

Il est possible de définir deux valeurs correspondant à la largeur et la hauteur.

Mots-clés disponibles :

contain — garde le ratio intact et redimensionne l'image pour qu'elle soit entièrement visible. 🚫 rognage.
cover — garde le ratio intact, mais redimensionne l'image pour que l'élément soit entièrement couvert. Quitte à rogner certaines parties.

See the Pen CSS — background-size by TIM Montmorency (@tim-momo) on CodePen.

Syntaxe courte¶

/* Forme longue */
.demo {
  background-image: url('image.png');
  background-size: 100px 100px;
  background-repeat: no-repeat;
}

/* Syntaxe courte équivalente */
.demo {
  background: url('image.png') 100px 100px no-repeat;
}

📖 Pour en savoir plus, consultez la page background de MDN.

Le flux natif de la page HTML¶

Ordre d'affichage¶

L'élément apparaissant en premier dans le code sera aussi celui apparaissant en premier dans la page.

Affichage d'un élément de type bloc (block)¶

Nativement, les éléments de type bloc tels que <div>, <p>, <ul>, <li>, <article>, <section>, <header>, etc. s'affichent un en dessous de l'autre dans la balise parent qui les contient.

See the Pen CSS by TIM Montmorency (@tim-momo) on CodePen.

« Les éléments de type bloc sont disposés l'un après l'autre, verticalement, en débutant tout en haut de l'élément parent qui les contient. La distance verticale entre deux blocs voisins est déterminée par leurs marges. Pour chaque élément de type bloc, le côté gauche de l'élément touche le côté gauche de son parent. Même chose pour le côté droit. »

— Traduction libre de : 9.4.1 Block formatting contexts - W3C

Affichage d'un élément de type en ligne (inline)¶

Nativement, les éléments de type en ligne tels que <span>, <em>, <strong>, <i>, etc. s'affichent sur la même ligne que l'élément précédent ou suivant, dans un flux horizontal.

📖 Pour en savoir plus, consultez la page Disposition de bloc et en ligne avec le flux normal de MDN.

Display¶

Chaque élément possède une propriété display qui dicte son affichage.

Par exemple, les balises <div>, <p> ou <ul> prennent toute la largeur disponible et s'affichent l'une au-dessus de l'autre, car leur display est à block par défaut. Tandis que les balises <span>, <img> ou <a> s'affichent l'une à la suite de l'autre, car leur display est à inline par défaut.

À gauche, display: block;, à droite, display: inline;:

See the Pen CSS by TIM Montmorency (@tim-momo) on CodePen.

block¶

Les éléments display: block en bref :

Prennent toute la largeur disponible.
S'affichent sur une nouvelle ligne (logique puisqu'ils prennent toute la largeur).
Acceptent les propriétés width et height.
Peuvent contenir n'importe quel autre type d'éléments (block, inline, etc.).

inline¶

Les éléments display: inline en bref :

Prennent la largeur de ce qu'ils contiennent, sans plus.
S'affichent un à côté de l'autre, comme des mots dans une phrase.
N'acceptent pas les propriétés width, height, margin-top et margin-bottom.
Peuvent contenir d'autres éléments inline, mais pas block.

inline-block¶

Les éléments display: inline-block sont des hybrides entre inline et block. Par exemple, les balises <button>, <select> ou <input> s'affichent l'une à la suite de l'autre, mais peuvent avoir une width et une height définies.

Ne prennent que la largeur de leur contenu par défaut, mais acceptent width, height, margin-top et margin-bottom.
S'affichent un à côté de l'autre.

Warning

Deux éléments inline-block peuvent s'afficher côte à côte. Cependant, dès qu'un espace ou un retour de ligne les sépare dans le code, un espace vide apparaît entre eux dans le rendu du navigateur.

none¶

.element {
  display: none;
}

display: none indique au navigateur de faire complètement abstraction d'un élément. Utile par exemple pour masquer un popup jusqu'à ce qu'un événement le déclenche.

Vertical align¶

La propriété CSS vertical-align permet de spécifier comment deux éléments inline ou inline-block affichés côte à côte doivent s'aligner l'un par rapport à l'autre.

Valeurs disponibles :

baseline — aligne avec la ligne de base
top ⬆️ — aligne en haut
middle — aligne au centre
bottom ⬇️ — aligne vers le bas
super — équivalent d'un exposant
sub — équivalent d'un indice

See the Pen CSS — vertical-align by TIM Montmorency (@tim-momo) on CodePen.

Position¶

Dans le flux normal, les éléments block (div, p, section, etc.) sont positionnés un à la suite de l'autre. Les éléments inline (span, strong, em, etc.) sont positionnés un à côté de l'autre selon leur ordre d'apparition dans le HTML.

See the Pen CSS — position by TIM Montmorency (@tim-momo) on CodePen.

Tip

📖 Être ou ne pas être dans le flux — MDN

position: static¶

Par défaut, le navigateur attribue position: static à tous les éléments.

position: relative¶

Les éléments en position: relative se positionnent d'abord selon le flux normal de la page, puis sont déplacés relativement à cet emplacement.

See the Pen CSS — position by TIM Montmorency (@tim-momo) on CodePen.

position: absolute¶

Les éléments en position: absolute ignorent complètement le flux de la page et se positionnent en fonction du parent le plus proche ayant une position autre que static.

See the Pen CSS — position by TIM Montmorency (@tim-momo) on CodePen.

position: fixed¶

Les éléments en position: fixed ignorent également le flux de la page, mais se positionnent en fonction de la fenêtre (viewport) plutôt que d'un parent.

See the Pen CSS — position by TIM Montmorency (@tim-momo) on CodePen.

position: sticky¶

Les éléments en position: sticky se positionnent d'abord selon le flux normal. Cependant, lorsqu'une de leurs propriétés top, right, bottom ou left correspond au défilement de la page, l'élément devient fixe.

See the Pen CSS — position by TIM Montmorency (@tim-momo) on CodePen.

Unités de mesure¶

Absolues¶

Les unités absolues gardent leurs dimensions peu importe leur contexte. Elles peuvent causer des enjeux pour les sites responsives.

px — pixels (unité absolue la plus répandue)
cm — centimètres
mm — millimètres
in — pouces

Warning

Les unités absolues peuvent causer des enjeux lorsque l’on souhaite créer des sites responsives.

Relatives¶

Les unités relatives se basent sur la dimension d'un parent pour déterminer leur dimension, ce qui les rend particulièrement utiles pour les sites responsives.

% — relatif au parent
em — relatif à la taille de fonte courante
rem — relatif à la taille à la racine du document <html>

Quand utiliser quelle unité ?¶

% — Pour qu'un élément prenne la moitié de la largeur de son parent, peu importe la largeur du parent :

.element { width: 50%; }

em — Pour qu'un texte ait une taille équivalente à la moitié du texte courant :

.small { font-size: 0.5em; }

rem — Pour que les titres affichent toujours à 2× la taille du texte de base :

.title { font-size: 2rem; }

Tip

0, peu importe l'unité de mesure, reste 0. Il n'est donc pas nécessaire de spécifier l'unité : 0px, 0em, 0% = 0.

Font¶

color¶

See the Pen CSS — color by TIM Montmorency (@tim-momo) on CodePen.

font-family¶

La propriété font-family permet de spécifier la police de caractères. Elle accepte le nom d'une police ou une liste de polices de secours :

font-family: Helvetica, Arial, sans-serif;

See the Pen CSS — font-family by TIM Montmorency (@tim-momo) on CodePen.

font-weight¶

La propriété font-weight permet de définir la graisse d'un texte.

font-weight: bold;

NUMÉRIQUE	NOM
100	thin
200	extra light
300	light
400	normal
500	medium
600	semi-bold
700	bold
800	extra bold
900	black

Par défaut, si aucune graisse n'est spécifiée, le texte est en normal (400).

See the Pen CSS — font-weight by TIM Montmorency (@tim-momo) on CodePen.

font-size¶

La propriété font-size permet de définir la taille du texte.

font-size: 16px;

Par défaut, la majorité des navigateurs attribuent 16px. Bien que les px soient très répandus, les rem et em offrent des avantages notables.

See the Pen CSS — font-size by TIM Montmorency (@tim-momo) on CodePen.

font-style¶

La propriété font-style permet de définir si un texte doit apparaître en italique :

normal (par défaut)
italic

See the Pen CSS — font-style by TIM Montmorency (@tim-momo) on CodePen.

line-height¶

line-height: 1.5;

Définit une hauteur de ligne de 24px si la taille de texte est de 16px, puisque 16px × 1.5 = 24px. Généralement, un line-height de base est défini sur la balise <body> afin d'affecter tous les éléments de la page.

See the Pen CSS — line-height by TIM Montmorency (@tim-momo) on CodePen.

letter-spacing¶

La propriété letter-spacing permet de spécifier l'espacement entre chacune des lettres d'un texte. Les valeurs négatives sont permises.

letter-spacing: 0.5em; /* 16px × 0.5 = 8px d'espace entre chaque lettre */

See the Pen CSS — letter-spacing by TIM Montmorency (@tim-momo) on CodePen.

Text¶

text-align¶

La propriété text-align détermine l'alignement horizontal du texte.

left (par défaut)
right
center
justify

See the Pen CSS — text-align by TIM Montmorency (@tim-momo) on CodePen.

text-decoration¶

La propriété text-decoration permet d'ajouter ou de retirer une ligne à un texte. Elle accepte plusieurs arguments : le type de ligne, sa couleur et son style.

See the Pen CSS — text-decoration by TIM Montmorency (@tim-momo) on CodePen.

text-transform¶

La propriété text-transform permet de modifier la casse d'un texte.

none — aucun impact (par défaut)
lowercase — transforme en minuscules
uppercase — transforme en majuscules
capitalize — met en majuscule la première lettre de chaque mot

See the Pen CSS — text-transform by TIM Montmorency (@tim-momo) on CodePen.

text-stroke¶

La propriété -webkit-text-stroke, bien que non standard (d'où son préfixe -webkit-), est supportée par tous les navigateurs majeurs. Elle accepte deux valeurs : l'épaisseur du trait entourant le texte et sa couleur.

Erreur fréquente

Lorsque le préfixe -webkit- est oublié, l'effet ne s'affiche pas.

See the Pen CSS — -webkit-text-stroke by TIM Montmorency (@tim-momo) on CodePen.

text-shadow¶

La propriété text-shadow permet d'ajouter une ombre à un texte. Elle accepte dans l'ordre : le décalage sur X, le décalage sur Y, le niveau de flou, et la couleur. Il est possible d'ajouter plusieurs ombres en les séparant par une virgule.

.element {
  text-shadow: 2px 2px red, 4px 4px blue;
}

See the Pen CSS — text-shadow by TIM Montmorency (@tim-momo) on CodePen.

width & height¶

Les propriétés width et height permettent de définir respectivement la largeur et la hauteur d'un élément. Par défaut, leur valeur est auto.

min-width & min-height¶

Permettent de définir une largeur et une hauteur minimum à un élément.

.element {
  width: 50%;
  min-width: 400px; /* prend le dessus sur width si nécessaire */
}

max-width & max-height¶

Permettent de définir une largeur et une hauteur maximale à un élément.

.element {
  width: 50%;
  max-width: 400px; /* prend le dessus sur width si nécessaire */
}

💡 max-width: 100% est régulièrement appliqué aux images afin qu'elles ne dépassent jamais de l'écran.

Border¶

La propriété border permet d'ajouter une bordure à un élément.

border-width¶

Définit la taille de la bordure.

See the Pen CSS — border-width by TIM Montmorency (@tim-momo) on CodePen.

border-style¶

Définit le style de la bordure. Styles disponibles :

none (par défaut)
solid — ligne standard (le plus commun)
dotted — pointillé
dashed — hachuré
double — double ligne
groove — bordure 3D donnant l'impression d'être gravée
ridge — bordure 3D donnant l'impression de ressortir
inset — bordure 3D donnant l'impression que l'élément est enfoncé
outset — bordure 3D donnant l'impression que l'élément ressort

See the Pen CSS — border-style by TIM Montmorency (@tim-momo) on CodePen.

border-color¶

Définit la couleur de la bordure.

See the Pen CSS — border-color by TIM Montmorency (@tim-momo) on CodePen.

Syntaxe courte¶

border: largeur type couleur

border: 1px solid #000000;

See the Pen CSS — border syntaxe courte by TIM Montmorency (@tim-momo) on CodePen.

border-radius¶

Permet de définir des coins arrondis sur un élément.

Info

Cette propriété s'applique qu'une bordure soit visible ou non.

Contrôle des coins individuellement¶

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Les coins peuvent aussi être spécifiés à même la propriété border-radius, dans le sens des aiguilles d'une montre ⌚️ en commençant par le coin supérieur gauche.

Par exemple:

See the Pen CSS — border syntaxe courte by TIM Montmorency (@tim-momo) on CodePen.

Box-model¶

En CSS, chaque élément est une boîte rectangulaire — qu'il s'agisse d'un texte, d'une image ou de n'importe quel autre élément. Ce concept est appelé le Box model 📦.

La boîte CSS est constituée de 4 parties :

Le contenu — la zone de base définie par le texte/image ou le width et le height.
La marge intérieure (padding) — l'espace vide entre le contenu et sa bordure.
La bordure (border) — la bordure entourant l'élément.
La marge extérieure (margin) — l'espace entre la boîte et celles à proximité.

Schéma du box model CSS

Pour obtenir la dimension réelle de l'élément, il faut additionner le padding et le border.

Warning

La margin n'affecte pas la dimension réelle puisqu'elle se trouve à l'extérieur.

Par exemple, si un élément a un width de 200px et un padding de 50px :

Valeur	Propriété
200px	`width`
50px	`padding-left`
50px	`padding-right`
300px	Total

Linear gradient¶

La propriété background-image accepte la fonction linear-gradient() pour définir un dégradé.

background-image: linear-gradient(#00c774, #3c38ba);

See the Pen CSS — box-model by TIM Montmorency (@tim-momo) on CodePen.

Orientation¶

Par défaut, les dégradés sont verticaux. Mots-clés disponibles :

to top
to right
to bottom (par défaut)
to left

See the Pen CSS — box-model by TIM Montmorency (@tim-momo) on CodePen.

Pour des dégradés diagonaux :

to top left
to top right
to bottom left
to bottom right

See the Pen CSS — box-model by TIM Montmorency (@tim-momo) on CodePen.

Degrés¶

Il est aussi possible de spécifier une rotation en degrés pour plus de précision.

background-image: linear-gradient(90deg, #00c774, #3c38ba); /* équivalent de "to right" */

Points d'arrêt¶

Par défaut, les couleurs sont distribuées de façon égale. Il est possible de définir des points d'arrêt pour contrôler précisément où chaque couleur commence à fusionner avec la suivante.

/* Dégradé à trois couleurs égales */
background: linear-gradient(to right, #00c774, #3c38ba, #ff8487);

See the Pen CSS — linear-gradient by TIM Montmorency (@tim-momo) on CodePen.

Box-sizing¶

La propriété box-sizing permet de spécifier si le padding et le border d'un élément doivent être comptés dans sa dimension réelle.

content-box¶

content-box (valeur par défaut)

Évite que l'espace alloué au contenu change de dimension lorsqu'un padding ou border lui est ajouté — mais la taille totale de l'élément augmente.

Illustration content-box : sans padding à gauche, avec padding à droite — l'élément s'agrandit

border-box¶

Donne priorité à la dimension réelle de la boîte : le padding et le border sont absorbés à l'intérieur de la taille définie.

Illustration border-box : sans padding à gauche, avec padding à droite — l'élément conserve sa taille

border-box est particulièrement utile lorsque les éléments ont une dimension en % :

.box {
  width: 100%;
  padding: 20px;
}

Avec content-box, la taille réelle de cette boîte dépasserait la fenêtre, créant une barre de défilement horizontale. Avec border-box, la boîte prend toute la largeur de la fenêtre sans dépasser.

See the Pen CSS — float by TIM Montmorency (@tim-momo) on CodePen.

Bonne pratique avec box-sizing¶

La majorité des développeurs convertissent toutes les boîtes en border-box via cette ligne placée en début de feuille CSS :

* { box-sizing: border-box; }

Tip

Il est donc conseillé de toujours débuter vos feuilles de style avec cette ligne :

* { box-sizing: border-box; }

Float¶

La propriété float permet à un élément de flotter à gauche ⬅️ ou à droite ➡️ à l'intérieur de son conteneur, et permet au texte et aux éléments inline suivants de s'enrouler autour de lui.

Valeurs disponibles :

none (par défaut) — l'élément ne flotte pas
left — l'élément flotte à gauche ⬅️
right — l'élément flotte à droite ➡️

See the Pen CSS — float by TIM Montmorency (@tim-momo) on CodePen.

Impact sur le display¶

Pour que le contenu inline puisse s'enrouler autour d'un élément en float, celui-ci doit avoir une dimension calculable. Les éléments inline sont donc automatiquement convertis en display: block dès que float leur est attribué.

Opacity¶

La propriété opacity permet de gérer l'opacité d'un élément. Une valeur de 0 correspond à une transparence complète, 1 à une opacité complète.

La propriété affecte l'ensemble de l'élément, incluant son contenu et ses enfants.

See the Pen CSS — opacity by TIM Montmorency (@tim-momo) on CodePen.

Warning

Bien que certains navigateurs acceptent les valeurs en pourcentages, il est conseillé d'utiliser une valeur entre 0 et 1 pour éviter des problèmes de compatibilité.

Z-index¶

Par défaut, une balise HTML se positionne toujours par-dessus celles qui la précèdent dans le code. On peut modifier cet ordre d'empilement en spécifiant une valeur de z-index.

Warning

Seuls les éléments ayant une propriété position définie à une valeur autre que static sont impactés par z-index.

See the Pen CSS — z-index by TIM Montmorency (@tim-momo) on CodePen.

Z-index: Contexte d'empilement¶

Les éléments partageant un même parent peuvent être déplacés en avant ou en arrière les uns des autres grâce à z-index — c'est ce que l'on appelle le contexte d'empilement.

Box-shadow¶

La propriété box-shadow permet d'ajouter une ombre à un élément. Une ombre nécessite d'être décalée de son parent via une valeur sur X, Y ou les deux.

See the Pen CSS — z-index by TIM Montmorency (@tim-momo) on CodePen.

Couleur¶

Ajouter une unité de couleur à la fin pour spécifier la couleur de l'ombre.

See the Pen CSS — z-index by TIM Montmorency (@tim-momo) on CodePen.

Flou¶

Une 3e valeur insérée avant la couleur permet de flouter l'ombre.

See the Pen CSS — z-index by TIM Montmorency (@tim-momo) on CodePen.

Étendue¶

Une 4e valeur permet d'augmenter ou de diminuer la taille de l'ombre par rapport à celle de son élément.

See the Pen CSS — z-index by TIM Montmorency (@tim-momo) on CodePen.

Direction¶

Par défaut, les ombres sont projetées vers l'extérieur. Le mot-clé inset passé en premier argument projette l'ombre vers l'intérieur, créant une illusion de profondeur.

See the Pen CSS — box-shadow by TIM Montmorency (@tim-momo) on CodePen.