kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Text mit Verlauf überlagern in CSS

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

Ein Verlauf im Hintergrund, ein transparenter Text und eine Schnittmaske erzeugen einen CSS3-Verlauf auf Text
Ein Verlauf im Hintergrund, ein transparenter Text und eine Schnittmaske erzeugen einen CSS-Verlauf auf Text

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!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Andre

    Verfasst am 21. Dezember 2012 um 12:58 Uhr.

    Endlich!!! Coole Lösung!

  2. Gunnar Bittersmann

    Verfasst am 3. Januar 2013 um 10:00 Uhr.

    Du hast ein Kätzchen getötet! http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/

    Es gibt keine text-fill-color-Eigenschaft in CSS 3. -webkit-text-fill-color ist proprietär. Vielleicht implementieren andere Browser das auch mal und es wird in die Spec aufgenommen. Vielleicht auch nicht und Webkit baut das auch wieder aus.

    Gegenwärtig ist es eine nette Spielerei, mit der man ausschließlich Webkit-Nutzern einen zusätzlichen Effekt bieten kann.

    • Jonas Hellwig

      Verfasst am 4. Januar 2013 um 11:02 Uhr.

      Ist häufig zu verlockend für Überschriften Buzzwords (CSS3, Responsive etc.) zu missbrauchen um die Klickzahlen zu verbessern. Du hast aber natürlich vollkommen recht – das war mehr als ungenau formuliert. Ich habe die Bezeichnung CSS3 in diesem Zusammenhang entfernt. Vielen Dank für den Hinweis!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.