münster-webdesign.net

Artikel mit ‘CSS3’ getagged

Webdesign mit CSS3: Transparenz

Mittwoch, 17. Februar 2010

Insbesondere in Hinblick auf modernes Webdesign hat CSS3 einiges zu bieten. Schade nur, dass die Entwicklung von CSS3 sowie die Integration in die Browser nur zögerlich vorangeht.

Eines der sicherlich am meisten in aktuellen Webdesigns eingesetzten CSS3-Features sind Transparenzeffekte respektive halbtransparente Elemente. Zur Regulierung der Transparenz von Seitenelementen bietet CSS3 Webdesignern die Eigenschaft “opacity”, gefolgt von einer Gleitkommazahl zwischen null und eins. Eins bedeutet dabei vollständig deckend, null bedeutet vollständig transparent.

Um nun beispielsweise ein DIV-Blockelement halbtransparent erscheinen zu lassen, genügt die folgende CSS-Angabe:

div {opacity:0.5}

Wie üblich braucht es für den Internet Explorer einen Sonderweg über die “filter”-Eigenschaft. Dabei ist zu beachten, das der Transparenzwert in diesem Fall prozentual anzugeben ist:

div {filter: Alpha(opacity=50)}

Last but not least bestünde auch noch die Möglichkeit, den Transparenzwert via “rgba()” zu implementieren. Doch zum einen unterstützt dies der Internet Explorer nicht und zum anderen vererben sich rgba()-Eigenschaften nicht auf Kindelemente.