Transparenzen in (X)HTML
Die Option, überlagerte Elemente durch andere hindurch scheinen zu lassen, eröffnet neue Möglichkeiten zum Webseiten-Design. Ob als für dynamische Navigationselemente oder für allgemein statische Designs, Transparenzen verleihen einer Webseite eine zusätzliche Dimension ohne große Änderungen zu fordern. Leider sind die Implementierungen bis in den heutigen Browsergenerationen selbst nicht ‘transparent’, wodurch der Webdesigner schnell zum Verzweifeln kommt.
Offiziell
Im CSS-Standard CSS 3 wird erstmals ein standardisiertes Attribut eingeführt, um ein Element durchsichtig zu machen. Das offizielle CSS-Attribut, um ein Element halb-transparent zu machen wird mit “opacity” festgelegt. Auf ein Element angewandt, wird sowohl das Element selbst, als auch alle Unterelemente je nach Übergabeparameter halbmaskiert dargestellt und Elemente dahinter sichtbar.
Obwohl CSS 3 noch im Recommendation-Status steckt1 wurden einige seiner Vorgaben bereits von einigen Browsern umgesetzt. Bei opacity hat jeder Browserhersteller sein eigenes Süppchen gekocht:
Internet Explorer
Der Internet Explorer hat seit der Version 4.0 die Möglichkeiten implementiert, Filter auf Elemente anzuwenden. Dazu gehörten sowohl Verwischeffekte (Blur()), wie auch Schatten oder Farbwertänderungen, aber auch der Filter Alpha(). Damit lässt sich im einfachsten Fall die Transparenz für ein Element wie in der W3C-Spezifikation festlegen. Darüber hinaus erlaubt der Filter Transparenz-Verläufe festzulegen, die linear, rechteckig oder radial sind.
Der Internet Explorer unterstützt bisher (7.0) nicht das opacity-Attribut. Es lässt sich allerdings dazu überreden: IE7 [sic!] ist eine Bibliothek, die in Laufzeit das Verhalten des Internet Explorers bei einer gegebenen CSS-Vorlage an den Standard anpasst. Ich habe die Bibiothek leider mit dem Internet Explorer 7 nicht zum Laufen bekommen.
Es gibt weitere Beschränkungen der Transparenz im Internet Explorer: Bei einem transparenten Element muss die Eigenschaft hasLayout wahr sein, damit die Transparenz tatsächlich angezeigt wird. Dazu müssen bestimmte CSS-Attribute gesetzt sein - bspw. eine absolute Positionierung, eine feste Dimension oder ein float-Attribut. Wichtig zu wissen, dass ein relativ positioniertes Element, das nur über margins, nicht aber über eine feste Breite festgelegt ist2 kann im Internet Explorer im Allgemeinen nicht als transparentes Element dargestellt werden.
Firefox und Opera
Im Firefox soll das Standard-Attribut opacity mit der Version 3.0 Anwendung finden. Bis dahin werden sich Webdesigner mit dem Mozilla-eigenen Attribut -moz-opacity zufrieden geben müssen. Dieses ist in Anwendung und Auswirkung identisch mit opacity.
Opera auf der anderen Seite hat in der Version 9.0 bereits die CSS3-Eigenschaft opacity fest integriert!
Weitere Ressourcen
- CSS 2.1 & 3 Support in KHTML 3.4
- A brief introduction to Opacity and RGBA - css3.info
- Cross-Browser Variable Opacity with PNG: A Real Solution
Verwandte Beiträge
Comments
Noch keine Kommentare.
RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI