CSS Transparenz
Ein nettes stilistisches Mittel um langweilige Webseiten-Layouts aufzupeppen sind halbtransparente Boxen auf einem komplexem Hintergrund wie z.B. einem Foto. Das Problem hierbei, sollte man kein Flash oder JavaScript einsetzen wollen, stellt lediglich die Umsetzung da.
Methoden gibt es einige. Nur leider ist keine davon universell einsetzbar.
opacity
Opacity ist eine Eigenschaften welche eigentlich erst mit CSS3 in die Browser implementiert werden sollen. Zulässig sind Werte zwischen 0.00 (totale Transparenz) und 1.00 (keine Transparenz). Um z.B. ein Bild zur Hälfte transparent zu machen reicht dieser Code in der dazugehörigen Regel:
opacity: 0.5;
Vorteile
- Funktioniert bei geschätzten 25% der Besucher
Nachteile:
- Es wird gnadenlos alles transparent - Rahmen und Text nicht ausgeschlossen
- Wird nur von modernen, aktuellen Browsern unterstützt (Somit nicht vom Internet Explorer)
- Die Arbeit an CSS3 ist noch nicht abgeschlossen und somit ist diese Eigenschaft nicht vom W3C festgelegt. Daraus folgt auch das der CSS-Validator sie nicht akzeptiert.
filter:Alpha()
Nicht alles an Microsofts Browser ist schlecht. Er hat zum Beispiel seit der Version 4.0 einige nette CSS Eigenschaften welche man eigentlich nur aus dem Bereich der Bildbearbeitung kennt. Auch für die Transparenz gibt es eine Eigenschaft. Dieser Code bewirkt eine halbe Transparenz:
filter: alpha(opacity=50);
Update für den IE 8: Für den neuen, standardkonformen, CSS Parser musste die Syntax leicht angepasst werden.
Vorteile
- Funktioniert bei geschätzten 75% der Besucher
Nachteile:
- Wird nur vom Internet Eyplorer 4+ unterstützt
- Auch hier wird die komplette Box transparent
- Nicht valide
Halbtransparentes PNG
Anders als in bei JPEG’s und GIF’s kann man bei PNG’s einem Pixel eine bestimmte Transparenz zuweisen. In Photoshop geht das so:
- 10×10 Pixel großes Bild mit transparentem Hintergrund erstellen
- Eine neu Ebene erstellen und mit der gewünschten Farbe füllen
- Dieser Ebene die gewünschte Transparenz geben
- Für Web speichern und PNG auswählen
Vorteile
- Läuft auf allen modernen Browsern einschließlich dem IE 7
- Valider Code
- Nur der Hintergrund wird transparent. Rahmen, Text usw. bleiben voll sichtbar
Nachteile
- Der IE 6 und abwärts machen nicht mit
Wie man sieht gibt es keine perfekte Möglichkeit. Wer auf validen Code Wert legt muss wohl oder übel auf den IE 6 verzichten welcher ja leider noch sehr weit verbreitet ist. Aber da der IE 7 nun endlich auch halbtransparente PNG’s unterstützt ist sieht die Zukunft um einiges besser aus.
12 Kommentare
Danke
schrieb am 30.08.08 um 18:53 Uhr:
Danke... Hifreiche Zusammenfassung... und ich habe mich gefragt, warum man den text so schlecht sieht.. tschau
Enrico
schrieb am 8.11.08 um 22:10 Uhr:
Dann muss man halt ein bischen Programmierarbeit reinstecken.
ala..
try{
}catch(e){
}finally{
}
um bessere Ergebnisse erzielen zu können.
Mfg Enrico
Module23
schrieb am 20.05.09 um 17:23 Uhr:
#allebrowser {
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Mozilla */
opacity: 0.90; /* Opera */
}
Grüße aus Koblenz :)
HaTeMe
schrieb am 28.06.09 um 18:08 Uhr:
Hm schade, dachte da gibt es doch schon per CSS was brauchbares. Ansonsten sind Halbtransparente .png's wohl die beste Möglichkeit. Wäre trotzdem schön wenn es da über CSS nur etwas für den Hintergrund gibt und auch für Background-Color gültig ist um das ganze eben auch schnell ändern zu können.
Background-Opacity: 0%; - sowas in der Art wäre super, eben auch auf andere Elemente erweiterbar (Image, Font usw.).
Sven
schrieb am 12.09.09 um 15:23 Uhr:
Hallo,
eine weitere Möglichkeit ist - sofern der Browser dies unterstützt - die Transparanz über RGBa zu setzen.
Bsp.: background-color: rgba(255, 255, 255, 0.5);
Vorteil ist, nur die Hintergrundfarbe ist transparent.
pw
schrieb am 29.09.09 um 14:21 Uhr:
Hallo,
Ich benutze für sowas auch immer PNGs (Zusätzlicher Vorteil: Verschiedene Alpha-Werte für verschiedene Pixel).
Für den IE6 Support habe ich den IEPngFix für mich entdeckt:
http://www.twinhelix.com/css/iepngfix/
Das benötigte CSS-Statement
behavior: url(iepngfix.htc)
lässt sich per conditional comments in ein IE stylesheet auslagern, so bleibt meine Seite auch schön valide (=
LG pw
Max
schrieb am 29.10.09 um 19:49 Uhr:
Ich mache auch alles schön mit png. Das ist wesentlich sauberer und außerdem muss man für ein schönes Design sowieso mit Grafikprogrammen arbeiten. Das Risiko ist einfach zu groß, dass zu viele Besucher ein falsches Bild von der Webseite bekommen. Mal sehen, was die Zukunft bringt... ;-)
Arne
schrieb am 5.11.09 um 23:28 Uhr:
Vielen Dank für diese Übersicht.
Ein Jammer, dass Css 3 noch nicht da ist ;)
denise schmitz
schrieb am 11.12.09 um 15:37 Uhr:
WOW sieht klasse aus, ich bin zwar noch ein CSS Neuling, aber das sollte kein Problem sein. Werde ich gleich mal ausprobieren. thx
