Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 3 Kommentare

  1. Adrian
    schrieb am 03.06.2011 um 07:41 Uhr:

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

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

    Antworten
  2. Lars Ebert
    schrieb am 07.05.2011 um 00:32 Uhr:

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

    Antworten
  3. More
    schrieb am 03.05.2011 um 09:02 Uhr:

    IE9 kanns nicht. :(

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →