Comment créer une ombre de texte interne avec des pseudo-éléments CSS ?

Création d'une ombre de texte interne avec CSS

Vous recherchez une technique pour projeter une ombre intérieure floue sur le texte d'une page Web. Vous avez exploré la propriété box-shadow, mais vous avez réalisé ses limites en matière d'ombrage interne. Cet article vise à vous guider avec une nouvelle technique utilisant des pseudo-éléments pour obtenir l'effet souhaité.

L'astuce des pseudo-éléments

En CSS, les pseudo-éléments ( :before et :after) permettent la création de contenu supplémentaire au sein d'un élément. Voici une application intelligente de ces éléments pour créer l'ombre intérieure :

1. Contenu : Attribuez l'attribut title sur votre élément de texte avec le contenu de l'ombre intérieure souhaité. Ce contenu sera utilisé par les pseudo-éléments.
2. Pseudo-éléments : Ajoutez deux pseudo-éléments (:before et :after) à l'élément texte. Attribuez le même contenu que l'attribut titre et attribuez-leur une position légèrement décalée (par exemple, 1 px à gauche et 1 px en haut) par rapport au texte original.
3. Couleur et opacité : Ajustez la couleur et opacité des pseudo-éléments pour créer une ombre floue translucide. Par exemple, rgba(255, 255, 255, .1) créerait une ombre blanche avec 10 % d'opacité.
4. Z-Index : Positionnez les pseudo-éléments derrière le texte original en utilisant z-index et valeurs négatives pour garantir qu'elles sont rendues derrière le texte.

Exemple de code

Vous trouverez ci-dessous un exemple de code qui illustre la technique :

<code class="css">.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!