Comment obtenir une ombre de texte interne avec CSS ?

Réaliser une ombre de texte interne avec CSS

Créer un effet d'ombre de texte à l'intérieur du texte peut être une tâche difficile en CSS. Bien que la propriété box-shadow permette le rendu des ombres au sein de l'élément, cette fonctionnalité ne s'étend pas au texte.

Cependant, une astuce astucieuse utilisant les pseudo-éléments :before et :after peut contourner cette limitation. En définissant l'attribut title de l'élément de texte sur le contenu souhaité et en utilisant ces pseudo-éléments, vous pouvez créer l'illusion d'une ombre de texte interne.

Pour obtenir cet effet, définissez les éléments :before et :after avec le contenu extrait de l'attribut title. Positionnez-les absolument dans l'élément de texte, légèrement décalés par rapport au texte original pour créer l'effet d'ombre. Stylisez-les avec une couleur noire transparente et une opacité, telle que rgba(255, 255, 255, .1), pour les mélanger subtilement avec l'arrière-plan.

Voici un exemple d'extrait de code illustrant cette technique :

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

.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>

Cette technique vous permet d'obtenir un effet d'ombre de texte interne, ressemblant visuellement à l'exemple que vous avez fourni, sans avoir besoin de Photoshop ou de manipulations approfondies d'images.

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!