Geätzter Texteffekt | CSS Styling Techniken

Einführung

In diesem Lab werden wir lernen, wie man mit CSS einen "geätzten" oder gravierten Texteffekt erstellt. Dieser Effekt kann Ihrem Web-Design einen einzigartigen und stilvollen Touch verleihen, und es ist überraschend einfach zu erreichen. Indem wir die Schatten, den Hintergrund und die Textfarbe anpassen, können wir die Illusion erzeugen, dass der Text in den Hintergrund geschnitzt ist. Begleiten Sie uns, während wir diese interessante und kreative Technik erkunden!

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") subgraph Lab Skills css/selectors -.-> lab-35195{{"Das Gestalten von geätzten Texteffekten mit CSS"}} css/colors -.-> lab-35195{{"Das Gestalten von geätzten Texteffekten mit CSS"}} css/fonts -.-> lab-35195{{"Das Gestalten von geätzten Texteffekten mit CSS"}} css/text_styling -.-> lab-35195{{"Das Gestalten von geätzten Texteffekten mit CSS"}} end

Geätzter Text

index.html und style.css wurden bereits in der VM bereitgestellt.

Um einen "geätzten" oder gravierten Effekt für Text auf einem Hintergrund zu erstellen, verwenden Sie die folgenden CSS-Eigenschaften:

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

Die text-shadow-Eigenschaft erzeugt einen weißen Schatten, der horizontal um 0px und vertikal um 2px von der Ausgangsposition versetzt ist. Stellen Sie sicher, dass der Hintergrund dunkler als der Schatten ist, damit der Effekt funktioniert. Darüber hinaus sollte die Textfarbe etwas verblasst sein, um es so aussehen zu lassen, als wäre er aus dem Hintergrund geschnitzt. Schließlich wenden Sie die etched-text-Klasse auf das gewünschte HTML-Element, wie z. B. einen Absatz, an, um den Effekt zu erzielen.

<p class="etched-text">I appear etched into the background.</p>

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Geätzter Text-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.