Eine der segensreichen Neuerungen von CSS3 ist Vergabe von Transparenz über das Farbmodell rgba. Die sonst nutzbare opacity wirkt sich leider auch auf Kindelemente aus, sodass nicht nur eine Box einen halbtransparenten Hintergrund hat, sondern leider auch jeglicher Text oder Bilder in ihr. Bei rgba passiert dies nicht. Nur das Objekt, dem eine Farbe mittels rgba zugewiesen wurde, zeigt diese auch in der gewünschten Form.
Leider hat Microsoft diese Technik wie alle anderen guten und wichtigen Techniken erst in Version 9 des Internet Explorers integriert. Doch es gibt Abhilfe mit dem Microsoft-eigenen Gradient-Filter. Dieser Filter transportiert nicht nur Farbinformationen, sondern auch Transparenzinformationen. Also weist man einem Objekt einfach einen Verlauf von einer Farbe auf sich selbst zu und vergibt zusätzlich noch einen Alphawert, schon hat man rgba auch für den alten IE bis Version 6 (oder sogar tiefer) nachgestellt.
Doch wie kommt man auf den Transparenzwert „7f“? Der Farbwert des Filters ist in hexadezimaler Schreibweise verfasst. Im Falle der Farbe wird aus rgb(0,0,0) einfach #000000. Für den heexadezimalen Transparenzwert multipliziert man 255 (der maximale RGB-Wert) mit der Transparenz (also 255*0.5). In diesem Falle bekommen wir 127.5 als Ergebnis. Wir benötigen eine ganze Zahl und müssen uns deshalb für Auf- oder Abrunden entscheiden. Dann suchen wir einen Zahlenkonverter auf und lassen uns den Dezimalwert in einen Hexadezimalwert wandeln. „127“ wird dann zu „7f“, 128 wird zu „80“. Diesen Wert stellen wir an den Anfang des Hexadezimalwertes im MS-Filter.
Nutzer von Präprozessoren wie Sass haben hier natürlich die Nase vorn, denn sie können diesem die Rechenarbeit überlassen.
Anhand der Formatierung einer Überschrift und eines über einem Bild liegenden Textes kann man den grossen Vorteil von rgba sehr gut ermessen. Die jeweils erste Version ist mit opacity, die zweite dann mit rgba formatiert.
29. März 2012 um 7:13 Uhr
Zwei Ergänzungen dazu noch:
A) Durch den Filter wird die Schriftenglättung in dem betroffenen Element ausgehebelt. Zumindest im IE8 lässt sich dem begegnen, indem man den inneren Text (und/oder Kindelemente) in einen Container packt, dem man ein
position: relativeverpasst.position: relative„befreit“ diese Elemente dann aus dem Griff des Filters und, bums, da ist die Schriftenglättung dann wieder. Hilft auch bei anderen Filtern.B) Ich verzichte mittlerweile auf die
-ms-filter-Variante, da alle IEs, einschließlich des IE9 die herkömmliche Schreibweise unterstützen. Also warum sich doppelte Arbeit machen? Da bin ich faul.29. März 2012 um 7:20 Uhr
Danke fürs Aufschreiben dieses Fallbacks und auch den Hinweis vom Schepp. So ist der oldIE-Support notfalls einigermaßen erträglich. Korrigiere aber bitte in Deinem Text noch die Multiplikation „(also 255+0.5)“.
29. März 2012 um 7:35 Uhr
@Dirk: Danke für den Hinweis auf den jetzt korrigierten Schreibfehler. Merke: alles nochmal gründlich lesen und eher nicht vor dem dritten Kaffee posten 🙂
29. März 2012 um 12:06 Uhr
Windows hat einen eingebauten „Zahlenkonverter“. [Windows-Taste]+[R] bzw. Start->Ausführen und dann „calc“ in das Eingabefeld geben, mit [ENTER] bestätigen (Alternativ einfach den Taschenrechner aus den Tiefen des Startmenüs suchen).
Den Rechner über das Menü Ansicht->Wissenschaftlich in den erweiterten Modus bringen. Et voilá! Schon hat man die Radio-Buttons für HEX/DEC/OKT/BIN.
29. März 2012 um 12:38 Uhr
In Windows 7 lautet die passende Ansicht des Rechners »Programmierer«.
2. April 2012 um 9:56 Uhr
Super.
Hat mir grad‘ ein altes Problem gelöst.
Danke.