In Photoshop lässt sich ein Text unkompliziert mit Hilfe einer Verlaufsüberlagerung optisch aufwerten. Doch wie sieht es in CSS aus? Verläufe lassen sich grundsätzlich in CSS3 herstellen, nur auf Texten funktioniert es leider nicht so einfach. Hier kann kein Verlauf als Farbe angegeben werden, es sind daher nur einfarbige Texte möglich. Mit folgendem Trick könnt ihr zumindest in Webkit-Browsern (Chrome, Safari, Safari mobile, Android Browser) einen Verlauf als Textfarbe festlegen. In inkompatiblen Browsern wird der Text einfarbig dargestellt.
Transparenter Text + Schnittmaske
Der Effekt lässt sich mit wenig Aufwand herstellen. Zunächst wählt ihr wie gewohnt eine Schriftart, die Schriftgröße und eine Farbe als Fallback-Lösung für inkompatible Browser. Im zweiten Schritt folgen Angaben, die nur Webkit-Browser lesen und interpretieren können.
Dem Hintergrund des Textes wird ein linearer Farbverlauf zugewiesen, der Text selbst erhält eine transparente Füllung. Anschließend wird eine Schnittmaske erstellt. Der transparente Text dient dabei als Grundlage, der Verlauf wirkt nur noch in diesem Bereich. Das Endergebnis ist daher ein Verlauf in Form des Textes.
CSS-Code für Text-Gradients & Live-Beispiel
Der CSS-Code ist erfreulich übersichtlich.
.gradientText {
font-family: Arial;
color: yellow;
font-size: 150px;
background: -webkit-linear-gradient(yellow, green);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
Die nachfolgende Abbildung ist ein Live-Beispiel. Aufgrund des Vendor-Prefixes -webkit- könnt ihr das Beispiel natürlich nur in Chrome oder Safari sehen.
Beispiel in neuem Fenster öffnen
Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.