Transparenzen mit CSS in allen Browsern

Während CSS3 eine Riesenfülle an Effekten bereithält, unter anderem auch Transparenzen, sind diese noch lange nicht mit allen Browsern kompatibel. Dader gewissenhafte Webdesigner aber für eine breite Masse an Besuchern und deren Browser arbeiten sollte, habe ich hier einen Lösungsweg, mit dem man Text und auch Bilder mit CSS transparent machen kann.

Um die mangelnde Transparenz-Unterstützung vieler und vor allem alter Browser zu umgehen, lege ich in CSS einfach eine Klasse an, die sämtliche CSS-Transparenz-Befehle übermittelt:

.transparenz {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Das Ganze im Überblick

filter:alpha
Dieser Wert wird vom Internetexplorer von Microsoft unterstützt und erwartet einen Wert von 0 bis 100.

-moz-opacity
Der Firefox interpretiert den Wert dieses Filters als Transparenz und erwartet einen Wert von 0.0 bis 1.0

-khtml-opacity
Damit arbeitet der Safari-Browser und alle anderen Browser, die khtml unterstützen,  richtig. Erwartet wie die -moz-opacity einen Wert von 0.0 bis 1.0

opacity
Damit macht man die Klasse zukunftssicher, denn diese Eigenschaft steht in CSS3 für die Transparenz. Wertangabe von 0.0 bis 1.0.

2 Kommentare for “Transparenzen mit CSS in allen Browsern”

  1. 17. November 2009, 14:37
    Franz Metall sagt:

    Danke genau danach habe ich gesucht…scheiss ie6…

Trackbacks

  1. Artikel über CSS & Transparenzen | Webdesign und Suchmaschinenoptimierung: Dietmar Hartje Mediendesign

Kommentar hinterlassen




CommentLuv Enabled