Abonnieren
Über einen kurzen Artikel bei basicthinking bin ich auf das Blog »The net is dead« gestoßen, bei dem mir die Transparenzeffekte so gut gefallen haben, dass ich nachrecherchiert habe, wie das funktioniert.
Transparenzen (Opazität) sollen erst in CSS 3 in den Standard aufgenommen werden, können aber in einer ganzen Reihe von Browsern bereits jetzt eingesetzt werden. Marco verwendet folgenden Code im Stylesheet:
opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Das ist eine Mischung aus CSS3-Code (opacity:0.5;) und proprietärem Code für den Internet Explorer.
Nach meinen bisherigen Recherchen unterstützen das CSS3-Attribut opacity mittlerweile die aktuellen Versionen von Mozilla, Firefox und Safari. Die anderen Browser ignorieren das Attribut (wobei ich mir nicht sicher bin, ob es bei einem CSS-Test validieren würde – wahrscheinlich nicht). Die Schreibweise lautet:
opacity: Dezimalbruch
wobei sich der Dezimalbruch zwischen 0.0 und 1.0 bewegen muss. 0.0 ist unsichtbar und 1.0 vollständige Deckung. Diese Schreibweise löst damit das alte proprietäre Mozilla-Attribut -moz-opacity ab. Einige weiterführende Links dazu:
Der Internet Explorer bis Version 6 versteht dieses CSS-Attribut noch nicht. Allerdings kann man ersatzweise proprietäre Filter verwenden, die von den anderen Browsern ignoriert werden. Microsoft bietet ab IE 5.5 sehr viele derartige Filter an (Übergänge, Transparenzen und mehr. Einen Überblick über diese Filter bietet Microsoft in seinen Web Development-Seiten. Ein etwas einfachere Einführung ist bei drweb zu finden.
Ich würde diese Filter nur äusserst sparsam verwenden und letztlich auch nur, wenn der gleiche Effekt auch in anderen Browsern erreicht werden kann. Das würde die Verwendung eigentlich auf Transparenz beschränken. Ausserdem würde ich sie in Conditional Comments einsetzen:
<!--[if IE]> <style type="text/css"> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); </style> <![endif]-->
So sollte auch eine Validierung möglich sein.
Von Peter am 03.02 um 18:43 Uhr. Kategorie: HTML-CSS
hizuzufügen sei, daß der conditional comment in der aktuell präsentierten form leider nicht korrekt ist - es fehlt der style-block um die eigentliche css-regel.
eine durchaus elegante lösung, die auch noch vollkommen ohne opacity-rule auskommt, basiert auf hintergrundbildern, die mit “background-position: fixed” und background-positionierung arbeiten. entsprechend umfangreiche beispiele findet man bei Dean Edwards in form von demos zu seiner javascript-lösung namens /ie7/.
Ups, du hast natürlich völlig recht, war schon spät gestern :-). Habs ganz schnell ausgebessert.
Wenn ich richtig vermute, meinst du http://dean.edwards.name/IE7/. Soweit ich es bis jetzt verstanden habe, handelt es sich um JavaScripts, die bisher nicht vorhandene Funktionen im Internet Explorer simulieren, unter anderem Transparenzen im PNG. Das ist natürlich eine geniale Lösung; funktioniert aber vermutlich nur mit aktiviertem JavaScript und ist für ein einfaches Gimmik wie eine Transparenz im Menü ein bisschen viel Aufwand. Aber in einem wichtigeren Kontext kann es sehr hilfreich sein, kann ich mir vorstellen. Danke für den Hinweis!
ja, genau die URL meinte ich ;) bin vor etwa nem jahr zufällig drauf gestoßen. im grunde genommen ist das auch keine reine javascript-lösung mehr, sondern geht über HTCs schon einen schritt weiter. die unterstützung für png-transparenzen ist aber nur ein kleines von ziemlich vielen details, die mit /ie7/ aufgebohrt werden; zum beispiel ist position:fixed eines der wichtigeren css-attribute, die man dem ie6 damit einimpft, und die korrekturen am fehlerhaften boxmodel dürften auch nicht unwichtig sein, ebenso bestimmte selektoren.
da das ganze als conditional comment nur für den IE eingebunden wird, störts die anderen browser nicht und hakt auch an keiner validierung. ich möchts in manchen kontexten nicht mehr missen ;)
Hab schon seit längerem nach etwas ähnlichem gesucht, hab dann aber letztendlich zu “halbtransparenten” GIFs (jedes 2. pixel ist transparent) greifen müssen, weil ich keine Lösung gefunden habe die überral funktioniert,…
@alle:
Im Moment habe ich Probleme mit den Links in den Kommentaren, die werden zwar geparst, sind dann aber durch Zeichenkonvertierungen fehlerhaft. Ich habe deshalb das Parsen der Links deaktiviert, jetzt kann man den Link zumindest lesbar reinschreiben ... Sorry, bin noch am Suchen, wo das passiert. Sobald ich weiss, was los ist, gibts wieder Links in den Kommentaren.
@CountZero
Das mit den Conditional Comments habe ich nicht gesehen - wobei, hätte ich mir natürlich denken können. Unter dem Aspekt ist die Sache schon sehr viel interessanter. Nach allem was er schreibt, kann man den IE 6 dann fast wie einen standardkonformen Browser behandeln. Schon verlockend.
@Charmed Fan
Sieht das ordentlich aus? Wird wohl als Raster zu erkennen sein. Ich bin da brutaler: was nicht geht, geht halt nicht, sehen die Leute das schöne Gimmick eben nicht. Aber dann darf es natürlich nicht die Benutzbarkeit einschränken.
nein, gerastert sieht es nicht aus (zumindest nicht bei 1280x1024 xD), ich hab ein Bild in den Hintergrund gelegt, das immer mit scrollt, und die Textboxen (nicht die formular-Dinger, sondern DIVs) die eine Hintergrundfarbe hatten, waren anschließend transparent und mit 2px großen “halbtransparenten” GIFs gefüllt, hat wunderbar funktioniert, nur beim ie war das scrollen nicht mehr so “weich” wie gewohnt und naja, falls Hintergrundfarbe und text-Farbe zu ähnlich waren (zB. grau/schwarz) war die Schrifft - verständlicherweise - etwas “zackig”,…
Trackback-URL: http://www.lisardo.biz/trackback/201/OCjue8RO/