Artikel abonnieren
Mit CSS3 bekommen Webdesigner zwei neue Möglichkeiten um Webseiten durch transparente Elemente und Farben interessanter zu gestalten. Wie man Elemente transparent gestaltet und bei Farbangaben zusätzlich auch die Deckkraft angibt erfahrt ihr in diesem Artikel.
Transparente Elemente mit opacity
Die CSS3-Eigenschaft opacity legt die Deckkraft eines Elementes sowie aller seiner Kind-Elemente bzw. Inhalte fest. Diese Eigenschaft wird zwar erst mit CSS3 in den Standard aufgenommen, die meisten aktuellen Browser (außer dem Internet Explorer) unterstützen sie aber bereits.
Sehr alte Mozilla/Webkit-Browser kennen nur die Eigenschaften -moz-opacity und -khtml-opacity, da diese Browser allerdings heutzutage kaum noch verwendet werden, kann man diese auch weglassen. Für den Internet Explorer gibt es die proprietäre Eigenschaft filter: alpha(opacity=XXX) mit dem die Deckkraft eines Elementes verändert werden kann. Ab Version 8 des Internet Explorers unterstützt dieser zusätzlich auch noch die Schreibweise -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=XXX)";, diese kann man aber auch weglassen, da der IE 8 immer noch die alte Schreibweise unterstützt.
.halbtransparent { opacity:0.5; /* CSS3 (Neuere Browser außer Internet Explorer) */ filter:alpha(opacity=50); /* Internet Explorer 4-7 */ /* Folgende Eigenschaften können auch weggelassen werden, fast alle Browser verstehen die beiden obigen Eigenschaften. */ -moz-opacity:0.5; /* Gecko (Ältere Mozilla-Browser) */ -khtml-opacity:0.5; /* Alte Versionen von Konqueror oder Safari */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* Internet Explorer 8 */ }
Die Eigenschaften opacity, -moz-opacity und -khtml-opacity erwarten eine numerische Angabe von 0.00 (komplett durchsichtig) bis 1.00 (keine Transparenz). Die beiden Filter für den Internet Explorer erwarten eine Angabe von 0 (unsichtbar) bis 100 (100% sichtbar).
Falls das Element im Internet Explorer trotz richtiger CSS-Eigenschaften nicht transparent dargestellt wird kann das daran liegen das es nicht die Eigenschaft hasLayout hat. Das lässt sich zum Beispiel durch das hinzufügen von zoom:1; beheben. Mehr Informationen über hasLayout.
Farben mit verringerter Deckkraft: RGBA bzw. HSLA
Mit CSS 1 und 2 hat man 3 Möglichkeiten um Farben anzugeben: Im hexadezimalen Format, z.B. #RRGGBB, als Farbname, z.B. red, oder in der Form rgb(rrr, ggg, bbb). Mit CSS3 kommen noch rgba(rrr, ggg, bbb, a.aa) sowie hsla(hhh, sss%, lll%, a.aa) hinzu. Das A in RGBA bzw. HSLA steht für Alphakanal, und regelt die Deckkraft der Farbe.
Das macht es viel leichter beispielsweise nur den Hintergrund eines Elements durchsichtig zu gestalten während die Inhalte voll sichtbar bleiben.
.transparenter_hg { background-color:rgba(255, 0, 0, 0.50); }
Bei der HSL(A)-Angabe wird die Farbe nicht über die Rot-, Grün-, und Blauanteile der Farbe definiert sondern über den Farbton (Hue), die Farbsättigung (Saturation) und die Helligkeit (Lightness). Der HSL-Farbraum ist für Menschen einfacher zu benutzen als der RGB-Farbraum, da man nur jeweils einen Wert verändern muss um Helligkeit, Sättigung und Farbe zu ändern.
Browserunterstützung
Ich habe mal ausprobiert welcher Browser welche Eigenschaften versteht, hier eine kleine Tabelle:
| Browser | opacity | -moz-opacity | -khtml-opacity | filter: alpha | -ms-filter: alpha | RGBA und HSLA |
|---|---|---|---|---|---|---|
| Mozilla Firefox 3.1 | Ja | Nein | Nein | Nein | Nein | Ja |
| Mozilla Firefox 3.0.6 | Ja | Ja | Nein | Nein | Nein | Ja |
| Mozilla Firefox 2.0.0.19 | Ja | Ja | Nein | Nein | Nein | Nein |
| Firefox 0.8 | Nein | Ja | Nein | Nein | Nein | Nein |
| Epiphany 2.22 | Ja | Ja | Nein | Nein | Nein | Ja |
| Opera 8.54 | Nein | Nein | Nein | Nein | Nein | Nein |
| Safari 3.2.1 | Ja | Nein | Ja | Nein | Nein | Ja |
| Opera 9.64 | Ja | Nein | Nein | Nein | Nein | Nein |
| Internet Explorer 7 | Nein | Nein | Nein | Ja | Nein | Nein |
| Chrome 1.0 | Ja | Nein | Ja | Nein | Nein | Ja, aber ohne Transparenz |
| Internet Explorer 5.5 | Nein | Nein | Nein | Ja | Nein | Nein |
| Internet Explorer 8 | Nein | Nein | Nein | Ja | Ja | Nein |
Mein Fazit ist: Transparente Elemente sind heutzutage kein Problem mehr, es wird aber noch einige Zeit dauern bis man RGBA/HSLA benutzen kann.
Beispielseite
Ich habe eine kleine Beispielseite mit ein paar transparenten Texten und Elementen sowie Farben mit reduzierter Deckkraft erstellt um das ganze mal zu demonstrieren.
(3 Bewertungen, Durchschnitt: 4,33 von 5)
Loading ...
[...] von Antu Wie man HTML-Elemente mittels CSS transparent machen kann habe ich ja bereits in diesem Artikel beschrieben. In diesem Artikel erkläre ich wie man mit JavaScript Elemente ein- und ausblenden [...]
Hallo!
In Gecko 1.7.1 (Firefox 0.9) wurde vor etlichen Jahren die CSS-Eigenschaft
opacityeingeführt.-moz-opacityist tot, mausetot! Einfach nuropacityverwenden.Auch -khtml-opacity dürfte in der Praxis heute überflüssig sein. Safari versteht opacity seit Version 1.2 (WebKit 125).
IE8 versteht beide Kurzformen mit Anführungszeichen:
filter: "alpha(opacity=50)"und-ms-filter: "alpha(opacity=50)"Siehe auch developer.mozilla.org/en/CSS/opacity.
Vielen Dank für den Hinweis. Ich werde das demnächst noch dazuschreiben.