Ombre du texte en CSS

Lucas D. -

Syntaxe et utilisation de base

La propriété CSS text-shadow vous permet d'ajouter des ombres aux éléments de texte. Elle prend quatre valeurs : le décalage horizontal, le décalage vertical, le rayon de flou et la couleur.

La syntaxe de base pour appliquer une ombre au texte est :

Conseil: Syntaxe de base

sélecteur {
  text-shadow: décalage-horizontal décalage-vertical rayon-de-flou couleur;
}

Voici ce que signifie chaque valeur :

  1. décalage-horizontal : La distance, en pixels, dont l'ombre doit être décalée horizontalement par rapport au texte. Une valeur positive déplace l'ombre vers la droite, tandis qu'une valeur négative la déplace vers la gauche.

  2. décalage-vertical : La distance, en pixels, dont l'ombre doit être décalée verticalement par rapport au texte. Une valeur positive déplace l'ombre vers le bas, tandis qu'une valeur négative la déplace vers le haut.

  3. rayon-de-flou : La quantité de flou appliquée à l'ombre. Une valeur plus élevée créera une ombre plus douce, tandis qu'une valeur plus basse donnera une ombre plus nette. En définissant cette valeur à 0, l'ombre aura un bord net.

  4. couleur : La couleur de l'ombre. Il peut s'agir de n'importe quelle valeur de couleur CSS valide, comme un code hexadécimal, RGB, RGBA, HSL ou un nom de couleur.

Conseil: Utilisation de text-shadow

h1 {
  text-shadow: 2px 2px 4px #000000;
}

Dans cet exemple, l'élément <h1> aura une ombre décalée de 2 pixels vers la droite et de 2 pixels vers le bas, avec un rayon de flou de 4 pixels et une couleur noire.

Vous pouvez également utiliser des valeurs négatives pour les décalages horizontaux et verticaux :

Conseil: Utilisation de valeurs négatives

p {
  text-shadow: -1px -1px 2px #CCCCCC;
}

Cela crée des ombres gris clair semblables à des ombres intérieures, car elles sont décalées d'un pixel vers le haut et vers la gauche.

En ajustant ces valeurs, vous pouvez créer divers effets d'ombre de texte pour répondre à vos besoins de design.

Techniques avancées d'ombre de texte

Ombres de texte multiples

Vous pouvez appliquer plusieurs ombres à un seul élément de texte en séparant chaque ombre par une virgule. Cela vous permet de créer des effets d'ombre plus complexes.

Conseil: Utilisation de plusieurs ombres

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Dans ce cas, le texte aura une ombre rouge avec un flou de 3px et une ombre bleue avec un flou de 5px. Les ombres se superposent.

Voici quelques utilisations créatives des ombres multiples :

  • Créer un effet de lueur néon en utilisant une ombre plus foncée sur une plus claire
  • Simuler un effet 3D en décalant les ombres dans des directions opposées
  • Ajouter des ombres portées et intérieures pour plus de style

Lors de la combinaison de plusieurs ombres, il est préférable de :

  • Limiter le nombre d'ombres pour éviter de surcharger le texte
  • Utiliser des couleurs semi-transparentes pour permettre un meilleur mélange
  • Ajuster les rayons de flou pour des effets plus doux ou plus nets selon les besoins

Ombre de texte et pseudo-éléments

Vous pouvez appliquer des ombres de texte aux pseudo-éléments (::before et ::after) pour créer des effets intéressants sans ajouter d'éléments HTML supplémentaires.

Conseil: Ajout d'un effet 'd'écho' avec des pseudo-éléments

h1::after {
  content: attr(data-text);
  position: absolute;
  text-shadow: 2px 2px 4px #000;
  top: 0;
  left: 0;
  z-index: -1;
}

Ici, le pseudo-élément ::after duplique le contenu du texte (en utilisant la fonction attr()), le positionne derrière le texte original et applique une ombre.

Vous pouvez également combiner les ombres de texte avec d'autres propriétés CSS sur les pseudo-éléments comme transform, opacity ou filter pour des effets plus avancés.

Ombre de texte et animations CSS

En utilisant les animations CSS, vous pouvez rendre les ombres de texte dynamiques. Vous pouvez animer des propriétés comme le décalage, le flou et la couleur.

Conseil: Animation de l'ombre au survol

h1 {
  transition: text-shadow .3s;
}

h1:hover {
  box-shadow: .5em .5em .8em rgba(255, .25, .25, .75);
}

Dans ce cas, le titre aura une lueur rouge au survol, en douceur pendant 0,3 secondes. Vous pouvez également utiliser des keyframes pour des animations complexes :

Conseil: Utilisation de keyframes pour des animations complexes

@keyframes pulse {
  from {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
  via {
    box-shadow: .35em -.35em .55em rgba(255, .25, .25, .75);
  }
  until {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
}

header {
  animation: pulse infinite ease-in-out;
}

Cela fait pulser le titre entre différentes nuances indéfiniment. Lors de l'animation des titres :

  • Utilisez des transitions pour les survols simples et des keyframes pour les plus complexes.
  • Soyez attentif aux performances car les flous sont gourmands en ressources.
  • Assurez-vous que l'animation améliore l'expérience utilisateur plutôt que de distraire du contenu.