kulturbanause Blog

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

Text mit CSS weichzeichnen (blurred)

Weichgezeichneter Text mit CSS3

CSS3 überrascht immer wieder mit interessanten Einsatzgebieten. Unter anderem bietet uns CSS3 die Möglichkeit Texte so zu gestalten, dass der Eindruck entsteht sie wären weichgezeichnet. In Photoshop würden wir einen solchen Effekt vielleicht mit dem Gaußschen Weichzeichner oder dem Weichzeichnungs-Werkzeug realisieren; in CSS3 kann die Eigenschaft text-shadow in Kombination mit einer transparenten Textfarbe dazu verwendet werden. Die Deckkraft des Textes lässt sich über die Alpha-Transparenz steuern.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Live-Beispiel

Der folgende iframe zeigt ein Live-Beispiel des Effekts. Der große Vorteil dieser Technik liegt in der minimierten Ladezeit, den reduzierten HTTP-Requests und in der Suchmaschinen-Optimierung bzw. barrierearmen Gestaltung. Der Effekt ist allerdings nur in modernen Browsern sichtbar.

Demoseite anzeigen

CSS-Code

Um einen Text weichzuzeichnen genügt folgender CSS-Code. Zunächst wird die Schriftfarbe auf transparent gesetzt. Anschließend wird der Schatten ohne vertikale- oder horizontale Verschiebung, direkt unter dem Text platziert und mit einem Faktor von 5 Pixeln weichgezeichnet. Der Farbwert ist in diesem Beispiel in RGB angegeben.


.blurred { 
  color: transparent; 
  text-shadow: 0 0 5px rgb(255,255,255); 
}

Um die Deckkraft des Textes zu steuern lässt sich der Farbwert auch in rgba (Rot, Grün, Blau, Alpha) angeben. Das folgende Beispiel reduziert die Deckkraft des Schattens auf 75%.


.blurred { 
  color: transparent; 
  text-shadow: 0 0 5px rgba(255,255,255,0.75); 
}

Da die Textfarbe auf transparent gestellt wurde, ist die Schrift in Browsern die die Eigenschaft text-shadow nicht interpretieren können unsichtbar. Aus diesem Grund solltet Ihr beim Praxiseinsatz unbedingt eine Fallback-Lösung verwenden. Das Framework Modernizr erleichtert euch hier die Arbeit erheblich.

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

    Verfasst am 3. Mai 2011 um 9:02 Uhr.

    IE9 kanns nicht. :(

  2. Lars Ebert

    Verfasst am 7. Mai 2011 um 0:32 Uhr.

    Nette Idee, das lässt sich bestimmt in Kombination mit :hover zu was Interessantem ausbauen…

  3. Adrian

    Verfasst am 3. Juni 2011 um 7:41 Uhr.

    Bei Opera v11.1 funktioniert das nicht, der Text bleibt unsichtbar.

    Wenn ich den Text aber markiere, wird ein schattierter Text angezeigt.

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.