Wie erstelle ich einen inneren Textschatten mit CSS-Pseudoelementen?

Erstellen eines inneren Textschattens mit CSS

Sie suchen nach einer Technik, um einen verschwommenen, inneren Schatten auf den Text einer Webseite zu werfen. Sie haben die Box-Shadow-Eigenschaft erkundet, sind sich aber ihrer Einschränkungen bei der inneren Schattierung bewusst. Ziel dieses Artikels ist es, Sie mit einer neuartigen Technik anzuleiten, die Pseudoelemente verwendet, um den gewünschten Effekt zu erzielen.

Der Pseudo-Element-Trick

In CSS sind Pseudoelemente ( :before und :after) ermöglichen die Erstellung zusätzlicher Inhalte innerhalb eines Elements. Hier ist eine clevere Anwendung dieser Elemente, um den inneren Schatten zu erzeugen:

1. Inhalt: Weisen Sie Ihrem Textelement das Titelattribut mit dem gewünschten inneren Schatteninhalt zu. Dieser Inhalt wird von den Pseudoelementen verwendet.
2. Pseudoelemente: Fügen Sie zwei Pseudoelemente (:before und :after) zum Textelement hinzu. Weisen Sie den gleichen Inhalt wie das Titelattribut zu und geben Sie ihnen eine leicht versetzte Position (z. B. 1 Pixel links und 1 Pixel oben) relativ zum Originaltext.
3. Farbe und Deckkraft: Passen Sie die Farbe an und Opazität der Pseudoelemente, um einen durchscheinenden, verschwommenen Schatten zu erzeugen. Beispielsweise würde rgba(255, 255, 255, .1) einen weißen Schatten mit 10 % Deckkraft erzeugen.
4. Z-Index: Positionieren Sie die Pseudoelemente hinter dem Originaltext mit Z-Index und negative Werte, um sicherzustellen, dass sie hinter dem Text gerendert werden.

Beispielcode

Unten finden Sie einen Beispielcode, der die Technik demonstriert:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen inneren Textschatten mit CSS-Pseudoelementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!