Modificateurs d’opacité et de couleur

En CSS, opacity contrôle la transparence globale d’un élément, de 0 (invisible) à 1 (totalement opaque). Le point essentiel à comprendre est que opacity est héritée par les éléments enfants : définir opacity: 0.5 sur une carte rend également son texte, ses images et ses boutons transparents à 50 %. Ce n’est souvent pas ce que vous recherchez : généralement, seul l’arrière-plan doit être transparent, pas le contenu.

Tailwind associe les utilitaires opacity-* aux valeurs CSS opacity. Les niveaux disponibles comprennent opacity-0, opacity-5, opacity-10, opacity-25, opacity-50, opacity-75, opacity-90, opacity-95 et opacity-100. Ils sont utiles pour les états désactivés, les fondus au survol et les éléments de superposition lorsque vous souhaitez délibérément rendre tout l’élément semi-transparent.

Tailwind v3 a introduit le modificateur d’opacité slash, qui applique l’opacité directement à une valeur de couleur sans affecter les éléments enfants. Écrivez bg-blue-600/50 pour définir l’arrière-plan en blue-600 avec une opacité de 50 % : seul l’arrière-plan est transparent, tandis que le texte et les éléments enfants restent totalement opaques. C’est la méthode recommandée pour créer des surfaces colorées translucides.

Le modificateur slash accepte toute valeur de 0 à 100, par pas de 5 : /0, /5, /10, /20, /25, /30, /40, /50, /60, /70, /75, /80, /90, /95, /100. Vous pouvez également utiliser des valeurs arbitraires comme /[33] pour obtenir exactement 33 % d’opacité. Le modificateur fonctionne avec tout utilitaire de couleur : bg-*, text-*, border-*, ring-* et shadow-*.

Le modificateur slash appliqué aux utilitaires text-* crée un texte semi-transparent sans classe d’opacité distincte. text-gray-900/50 affiche la couleur presque noire avec une opacité de 50 %, ce qui produit un effet atténué. Cette technique est souvent utilisée pour le texte indicatif, les libellés secondaires et le texte désactivé qui doit sembler estompé plutôt que prendre une autre couleur.

Appliquez le modificateur slash aux couleurs de bordure pour obtenir des bordures translucides : border-gray-900/10 crée une bordure très discrète qui fonctionne sur les arrière-plans clairs comme sombres. Cette technique est populaire pour les séparateurs et les bordures de cartes lorsqu’une bordure totalement opaque serait trop marquée. Combinez-la avec les variantes dark: pour adapter automatiquement le thème.

Combinez bg-white/80 avec backdrop-blur-md pour créer un effet de verre dépoli : un élément translucide offrant une vue floutée de ce qui se trouve derrière lui. Ce modèle d’interface moderne est utilisé dans les barres de navigation persistantes, les panneaux flottants et les tiroirs de notifications. Les utilitaires backdrop-blur-* utilisent la propriété CSS backdrop-filter.

Les boîtes de dialogue modales et les tiroirs nécessitent généralement un arrière-plan semi-transparent derrière eux. La classe bg-gray-900/50 crée la superposition sombre standard. Utiliser le modificateur slash plutôt que opacity-50 signifie que l’arrière-plan de la superposition est lui-même semi-transparent, tout en interceptant les clics et en empêchant toute interaction avec le contenu situé derrière.

Utilisez hover:opacity-* pour estomper les éléments au survol. L’application de opacity-100 hover:opacity-75 atténue légèrement un élément lorsqu’il est survolé, fournissant un retour tactile sans changement de couleur. Cet effet est subtil et élégant pour les superpositions d’images, les états de survol des cartes et les éléments de galerie lorsque vous souhaitez une réaction visuelle sans changement de couleur trop marqué.

Le modificateur slash fonctionne également avec les indicateurs de focus ring-*. ring-indigo-500/50 crée un anneau de focus semi-transparent, visible sans être agressif. Cela est particulièrement utile en mode sombre, où un anneau totalement opaque peut sembler trop marqué. Combinez-le avec focus-visible: pour afficher l’anneau uniquement lorsque la navigation au clavier le nécessite.

Lorsque les niveaux d’opacité prédéfinis (5, 10, 25, 50, 75, 100) ne répondent pas à vos besoins, utilisez des valeurs arbitraires avec la notation entre crochets : bg-blue-600/[33] applique exactement 33 % d’opacité. Les valeurs arbitraires offrent un contrôle au pixel près pour les spécifications de design nécessitant des valeurs de transparence inhabituelles, même si les niveaux prédéfinis produisent généralement un design plus cohérent.

Dans cette leçon, vous avez appris que les utilitaires opacity-* affectent l’ensemble de l’élément et ses éléments enfants, que le modificateur slash (bg-color/opacity) rend transparente uniquement la propriété de couleur, tandis que les éléments enfants restent opaques, et que backdrop-blur-md associé à bg-white/80 crée un effet de verre dépoli. Nous allons maintenant contrôler la taille, la position et la répétition des images d’arrière-plan.