Classes utilitaires pour contrôler la visibilité et l'opacité des éléments.
visibility masque visuellement un élément sans le retirer du
flux.
opacity contrôle la transparence sur une échelle de 0 à 1.
Toutes les classes disposent d'équivalents responsives par breakpoint.
Visibility
.visible
.hidden
Opacity
.op-10.op-8.op-6.op-4.op-2.op-0
Contrôle la propriété visibility.
Contrairement à display: none,
un élément .hidden reste dans le flux et occupe son espace.
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.visible |
visibility: visible |
L'élément est visible. Comportement par défaut. |
.hidden |
visibility: hidden |
L'élément est invisible mais conserve sa place dans le flux. |
Échelle de 11 niveaux de 0 (totalement transparent)
à 10 (totalement opaque).
Chaque incrément correspond à 0.1.
| CLASSE | VALEUR |
|---|---|
.opacity-0 |
opacity: 0 |
.opacity-1 |
opacity: 0.1 |
.opacity-2 |
opacity: 0.2 |
.opacity-3 |
opacity: 0.3 |
.opacity-4 |
opacity: 0.4 |
.opacity-5 |
opacity: 0.5 |
.opacity-6 |
opacity: 0.6 |
.opacity-7 |
opacity: 0.7 |
.opacity-8 |
opacity: 0.8 |
.opacity-9 |
opacity: 0.9 |
.opacity-10 |
opacity: 1 |
Toutes les classes de visibility et d'opacity disposent d'un équivalent responsive suffixé par le nom du
breakpoint,
actif à partir de la taille spécifiée (min-width).
Les suffixes disponibles correspondent aux clés définies dans
$breakpoints de
abstracts/breakpoints.
Chaque suffixe génère une règle @media (min-width: ...)
dédiée.
Utiliser .hidden quand l'élément doit rester dans le flux
(maintenir l'alignement, réserver l'espace). Pour masquer complètement sans réserver d'espace,
utiliser une classe display à la place.
Ne pas confondre .opacity-0 et
.hidden : les deux rendent l'élément invisible,
mais .opacity-0 reste interactif
(cliquable, focusable) alors que .hidden ne l'est pas.
Visibility · WEBDEV-UI DOCS / V1