Die Menschen unter euch, die sich mit Webdesign beschäftigen kennen sich das Problem. Man hat eine freigestellte Grafik und möchte diese auf einen Hintergrund setzten. Früher hat man dafür einfach ein GIF genommen. Das kann ja Transparenzen abspeichern. Dumm nur wenn man weiche Kanten braucht und der Hintergrund vielleicht nicht nur einfarbig Weiß, sondern vielleicht sogar ein Foto ist. Dann hat man nämlich bei GIFs so hässliche Ecken und Risse an den Kanten der Transparenz. Dafür gibt es PNGs mit 24Bit Auflösung. Die unterstützen nämlich gleich einen ganzen Alphakanal, der Vergleichbar mit dem Alpha aus Photoshop ist. Alphakanäle sind in der Lage weiche Verläufe beim Ãœbergang in die Transparenz darzustellen. So kann man eine beliebig weiche Grafik auf Hintergründer jeder Art setzten (Ja – auch auf Verläufe liebe Web 2.0 Fuzzies). Da gibt es nur ein klitzekleine Problem: Alle aktuellen Browser, Also Opera, Safari, Firefox und IE7.0 können mit dem Alphakanal prima umgehen. Nur der doofe alte Internet Explorer 6.0 stellt statt der Transparenz einen hässlich hellblau-gräulichen Kasten rund um das PNG dar. Wäre ja nicht so schlimm, wenn der IE6.0 nicht nach wie vor der meist verbreitete Browser überhaupt wäre. Nachdem ich mich lange damit rumgeschlagen habe und mich in der Zwischenzeit auch schon damit abfinden musste, habe ich nun die perfekte Lösung für das Problem gefunden. Hier findet Ihr eine säuberliche Erklärung wie man den IE6 dazu bekommt PNG-Grafiken korrekt darzustellen. Alles was man dafür tun muss ist ein sehr kleine JavaScript in die Seite einzubinden, die die PNG-Files anzeigen soll. Mehr ist nicht zu tun. Unglaublich, aber war.

Hier ein Beispiel um das Problem zu verdeutlichen (Ich habe das mit Photoshop simuliert, damit auch diejenigen unter euch, die nicht mit dem Internet Explorer 6 surfen, sehen wo das Problem liegt)

Links: das Logo als GIF Mitte: So stellt der IE6 ein PNG mit Alphakanal dar Rechts: Soll soll das Logo eigentlich vor dem Hintergrund erscheinen

Das ganze basiert auf einem Versuch von Microsoft das PNG Problem in den Griff zu bekommen. Die Lösung war es einen speziellen CSS-Befehl zu integireren, den nur der IE versteht. Der Befehl lautet filter:progid:DXImageTransform.Microsoft.AlphaImageLoader und sollte eigentlich in Klassen eingesetzt werden, die dann den jeweiligen PNGs zugewiesen werden sollten. Diese mühselige Code-getippe kann man sich mit dem JavaScript aber sparen, da es quasi diese Arbeit automatisch für jedes PNG-File übernimmt. Ich habe das Script schon bei einigen Projekten im Einsatz und bin fasziniert wie einfach und zuverlässig es seinen Zweck erfüllt. Hier noch einige weiterführende Infos zu Alphakanälen und dem Dateiformat PNG(Portable Network Graphic). Hier nochmal der Link zur JavaScript Lösung Und hier eine reine CSS-Lösung ohne das JavaScript (leider sehr umständlich, wie ich finde) Abschließend findet ihr hier die Dokumentation von Microsoft (MSDN) über den zugrunde liegenden AlphaImageLoader Filter

Be Sociable, Share!

• 

Schlagworte: Logo, Photoshop, Web 2.0, Work

Dieser Beitrag wurde am Samstag, 5. Januar 2008 um 00:52 Uhr veröffentlicht und unter Tutorials abgelegt. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Momentan ist weder das Kommentieren noch das Setzen eines Trackbacks möglich.