CSS Shortcuts: Weichzeichner-Effekte mit CSS3

Heute gibt es den bereits vor zwei Wochen via Twitter versprochenen neuen Teil der „CSS Shortcut“-Serie. Es geht um die netten Weichzeichner-/Blur-Effekte, die mit CSS3 und ggf. auch mit dem Einsatz von jQuery-Bibliotheken möglich sind.

Unterschiedliche Arten der Bildbeschriftung im Vergleich.

Unterschiedliche Arten der Bildbeschriftung im Vergleich.

 

Mit den Blur-Anweisungen kann der bereits aus Apples IOS7 bekannte Transluzent-Effekt nachgebaut werden. Ein spannender Einsatzbereich dieser Technik ist die Beschriftung von großen Bild-Elementen wie bei Slidern. Oft ist es aufgrund wechselnder Bildmotive mit unterschiedlichen Helligkeits- und Farbwerten schwer die Lesbarkeit des Textes zu gewährleisten. Mit dem Blur-Effekt kann man diesem Umstand etwas entgegenwirken. Früher war die einzige Option den Text in einen Rahmen zu setzen und diesen ggf. mit Transparenz-Effekten zu versehen. Mit CSS3 ist das jetzt anders!

CSS für Weichzeichnung

Ganz allgemein müssen diese CSS-Regeln dem Element zugewiesen werden, welches weichgezeichnet werden soll. Im Beispiel 3 ist das die dunkelgraue Box.

Richtig interessant wird der Blur-Effekt, wenn nicht eine farbige Fläche zugrunde liegt, sondern ein Bild-Element. Dies kann in der Beispielgrafik oben im Beispiel 4 betrachtet werden.

Die Vorgehensweise ist hier – insbesondere bei dynamischen Slidern – etwas komplizierter. Zur Laufzeit muss das aktive Bildelement als Hintergrund der Beschriftungsbox gesetzt werden, ansonsten würde nämlich das komplette Bildmotiv weichgezeichnet werden.

Nachfolgend der gesamte Quellcode des Beispiels. Einfach die Bild-URL mit einem eigenen Motiv ersetzten und das Ergebnis im Browser anschauen. Apropos Browser: Wie schaut es eigentlich mit der Unterstützung der verschiedenen Browser aus? Aktuell funktioniert’s nur mit Safari und Google Chrome. Ich denke aber, dass zumindest Firefox in Kürze mitzieht.

Beispiel Quellcode


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.