Text mit CSS weichzeichnen (blurred)

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.

Live-Beispiel für weichgezeichneten Text

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.

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Geschrieben von Jonas

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing