Wie man mit Transparenz und PNG arbeitet |
|
Dienstag, 21. August 2007
|
||
|
Sicher ist irgendwann jeder Webdesigner mal an einer Stelle angekommen, in dem transparente Elemente auf einem dynamischen Hintergrund dargestellt werden müssen. Wie das geht, erfahrt ihr hier.
Das ist schwerer, als man glaubt. Also folgende Aufgabenstellung: Wir haben einen Hintergrund, der z.B. mit einem Muster versehen ist. Auf diesem Hintergrund wollen wir jetzt ein Kasten platzieren, der abgerundete Ecken und einen Schlagschatten hat. Wie schaffen wir es, dass die Ecken und der Schatten halbtransparent dargestellt werden und den Hintergrund halb durchlassen? Damit wir dies realisieren können brauchen wir ein Bildformat, dass Transparenz unterstützt. Und da gibt es zwei Stück. GIF und PNG. GIF sagt jedem Pixel, welche Farbe er hat. Also zum Beispiel R:255 G:0 B:0 (#FF0000). Das wäre ein Knallrot. Außerdem kennt GIF noch eine "Farbe", welche die Pixel die damit angewählt sind, transparent erscheinen lässt. Das wirklich blöde daran ist, dass wir ja z.B. einen Schatten darstellen wollen. Und ein Schatten ist nicht komplett Transparent, sondern wirft etwas Schwarz auf den Hintergrund. Dafür gibt es das Bildformat PNG. Das arbeitet etwas anders als GIF. Anstatt nur 3 Werte pro Pixel zu benutzen (RGB), gibt es noch einen weiteren Wert: A (Alpha), der angibt wie Durchsichtig dieser Pixel sein soll. 0% ist komplett durchsichtig und 100% gar nicht. Also haben wir schon mal das Dateiformat gefunden, was wir benutzen müssen: PNG. Aber ganz so einfach ist es nicht, denn der Internet Explorer 6 unterstützt die Transparenz von PNG nicht. So sieht ein Beispiel im Firefox & IE7 und IE6 aus. Als Hintergrund hab ich eine Kachel gewählt und das PNG darüber hat einen schwarzen Schlagschatten.  Man sieht, im Firefox und Internet Explorer 7 zeigt der Browser den Schatten über die Kachel an. In IE6 wird statt dem transparenten Bereich ein babyblauer Bereich angezeigt. Keine Spur von Transparenz. Um das jetzt noch für den Internet Explorer 6 umgehen zu können gibt es folgenden Trick. Es ist nicht möglich einem normalen Bild zu sagen, dass es transparent ist. Das können wir nur mit Hintergrundbildern machen. Wir schreiben folgendes ins CSS: #element { Mit diesem Code im CSS wird das Hintergrundbild von #element in jedem Browser transparent angezeigt. // Nachtrag: Wie versprochen, habe ich das PNG-Beispiel hochgeladen. Zu dem PNG-Transparenz-Beispiel Egal ob mit Firefox, Internet Explorer 7 oder 6 - in jedem Browser wird der Transparenzeffekt korrekt dargestellt.  Kommentare (2)
|
||
| Letzte Aktualisierung ( Donnerstag, 11. Oktober 2007 ) | ||
| < Zurück | Weiter > |
|---|
