LabEx
LoginBeitreten

Gradient-Text mit CSS erstellen

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir das Konzept des Gradient-Textes in CSS erkunden. Ziel dieses Labs ist es, Ihnen zu helfen, zu verstehen, wie man mit der linear-gradient()-Funktion Gradient-Text erstellt und wie man die webkit-text-fill-color- und webkit-background-clip-Eigenschaften verwendet, um den Text mit einem Gradient-Hintergrund zu füllen. Am Ende dieses Labs sollten Sie in der Lage sein, visuell ansprechenden Gradient-Text zu erstellen, der das Design Ihrer Webseiten verbessern kann.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Gradient-Text

index.html und style.css wurden bereits in der VM zur Verfügung gestellt.

Um Text eine Gradient-Farbe zu geben, können Sie CSS-Eigenschaften verwenden. Zunächst verwenden Sie die background-Eigenschaft mit einem linear-gradient()-Wert, um dem Textelement einen Gradient-Hintergrund zu geben. Anschließend verwenden Sie webkit-text-fill-color: transparent, um den Text mit einer transparenten Farbe zu füllen. Schließlich verwenden Sie webkit-background-clip: text, um den Hintergrund mit dem Text zu schneiden und den Text mit dem Gradient-Hintergrund als Farbe zu füllen. Hier ist ein Beispielcodeausschnitt:

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

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 vorab zu sehen.

Zusammenfassung

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