Optische Unschärfe mit CSS3 in Contao nutzen

Ab und an möchte man innerhalb eines Designs mit den Zuständen von Schärfe und Unschärfe arbeiten. Elemente sollen zuerst reduziert angezeigt werden und dann bei einer Interaktion in den Vordergrund treten.

Für eine Textunschärfe steht die CSS-Eigenschaft text-shadow zur Verfügung. Werden die Werte dafür und für die Textfarbe sinnvoll gewählt, lässt sich damit ein Unschärfeeffekt erreichen.

Für eine Bildunschärfe wird das Bild entsprechend vorab in einem Bildbearbeitungsprogramm „präpariert”; anschließend kann dann mit CSS-Sprites das Bild „ausgetauscht” werden.

Die Eigenschaft text-shadow im Detail

Die CSS-Eigenschaft text-shadow ist nach folgenden Merkmalen zu definieren:

text-shadow: X-Wert Y-Wert Unschärfe-Radius Farbwert;

Positive X-Werte verschieben den Schatten nach rechts, negative nach links.
Positive Y-Werte verschieben den Schatten nach unten, negative nach oben.
Mit dem Wert für den Unschärfe-Radius wird der Grad der Weichzeichnung definiert; je größer der Wert, desto unschärfer erscheint der Schatten. Und mit dem Farbwert wird die Frabe des Schattens definiert.

Beispiel 1: Textunschärfe

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Beispiel 1: Textunschärfe – CSS-Definitionen

/* Unschärfe erzeugen */
#main .ce_text.blur
{
color:#bfbfbf;
text-shadow: 1px 1px 8px #333;
}

/* Unschärfe aufheben */
#main .ce_text.blur:hover
{
color:#000;
text-shadow:none;
background:#efefef;
}

Beispiel 1: Textunschärfe Variante

Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck.

Beispiel 1: Textunschärfe Variante – CSS-Definitionen

/* Unschärfe erzeugen */
#main .ce_text.blur-invert
{
color:#bfbfbf;
text-shadow: 1px 1px 8px #333;
}
/* Unschärfe aufheben */
#main .ce_text.blur-invert:hover
{
color:#fff;
text-shadow:none;
background:#999;
}

Sonderfall Internet Explorer

Wie oft ist der Internet Explorer auch hier ein Sonderfall. Beibringen lässt sich der Effekt über die Filter - wenn gleich das Ergebnis nicht genauso elegant aussieht wie in Browsern, die die CSS-Eigenschaft text-shadow beherschen.

filter:
progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true');

Über den Wert Color wird der Farbwert für den Glüheffekt definiert; mit dem Wert Strength die Stärke. Mit dem Blur-Filter wird mit pixelradius die Größe der Unschärfe definiert; der Zusatz enabled='true' setzt den Filter aktiv.

Es existieren weitere verschiedene Angaben im Netz, wie der Internet Explorer text-shadow darstellen können soll – prinzipell wirkt sich der Filter nur auf das umgebende Element aus. Abhilfe schafft hier nur das Anlegen eines zusätzlichen Spans, auf den dann explizit der Filter gesetzt wird. Schlicht unkomfortabel!

Die CSS-Definitionen (für das erste Beispiel) sehen dann – ergänzt um die Filter-Eigenschaften für den Internet-Explorer – wie folgt aus:

/* Unschärfe erzeugen */
#main .ce_text.blur
{
color:#bfbfbf;
text-shadow: 1px 1px 8px #333;
/* IE Anweisungen */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2) 
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true');
zoom:1; /* sorgt dafür das die Eigenschaft has-Layout vorhanden ist */
}

/* Unschärfe aufheben */
#main .ce_text.blur:hover
{
color:#000;
text-shadow:none;
background:#efefef;
/* IE Anweisungen */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=0)
progid:DXImageTransform.Microsoft.blur(pixelradius=0, enabled='true');
zoom:1; /* sorgt dafür das die Eigenschaft has-Layout vorhanden ist */
}

Natürlich lässt sich mit der CSS-Eigenschaft text-shadow noch einiges mehr erreichen:

Beispiel 1 Gravur

Optische Effekte mit der CSS3-Eigenschaft text-shadow in Contao nutzen.

Beispiel 2 Gravur

Optische Effekte mit der CSS3-Eigenschaft text-shadow in Contao nutzen.

Beispiel 3 - Navigation

Natürlich lässt sich die CSS-Eigenschaft text-shadow auch auf Navigationsmenüs anwenden und sich so der Einsatz von Grafiken vermeiden. Hier ist natürlich abzuwägen, ob die wichtige Funktion und Bedienbarkeit der Navigation durch den Einsatz bedienbar bleibt.

Bildschärfe – Bildunschärfe

Ergänzend sei hier noch ein kurzer Einschub ergänzt, wie man mit CSS-Sprites den Unschärfe-Effekt auch bei Bildern anwenden kann.

Beispiel 2: Bildunschärfe – CSS-Definitionen

/* unscharfes Bild anzeigen */
#main .chili
{
width:220px;
height:220px;
float:left;
margin:0 0 0 80px;
background:url("tl_files/chili-blur.jpg") no-repeat left top;}

/* scharfes Bild anzeigen */
#main .chili:hover
{
background:url("tl_files/chili-blur.jpg") no-repeat -220px top;
}

Das Bild besteht aus einem scharfen und einem unscharfen Bild, die beide in einer Bilddatei nebeneinander platziert sind. Durch die CSS-Definitionen wird die Breite und Höhe auf die Bildgröße eingestellt (für die Breite die Hälfte der Bildgröße, wenn die beiden Bildmotive nebeneinander angeordnet sind).

In diesem Beispiel sind die Abmessungen des Bildes 440 Pixel in der Breite und 240 Pixel in der Höhe. Dem Element DIV wurde ein Klasse zugewiesen .chili wird nun das Bild als Hintergrundbild zugewiesen und die Positionierung beim Drüberfahren mit dem Mauszeiger verschoben.

In diesem Beispiel wird das unscharfe Bild (rechter Bildteil) im Normalzustand angezeigt (left top). Beim Hover-Zustand wird das Bild um 220 Pixel nach links verschoben (-220px top).

Chili blur

Weiterführende Links:

twitter
rss-news-feed
weitzeldesign
planepix