Themen
Tutorials
Tools
Effekte mit CSS3
Mittlerweile lassen sich mit CSS3 sehr nützliche Effekte wie Schattierungen, Transparenz oder abgerundete Ecken realisieren. Wie das funktioniert wird Ihnen auf dieser Seite erklärt. Leider sind nicht alle Browser auf dem gleichen Stand, so ist z.B. der Internet Explorer mit vielen CSS3-Styles nicht kompatibel. Mozilla Firefox, Safari und Chrome dagegen unterstützen in den meisten Fällen die neuen Eigenschaften. Es gilt also gut abzuwägen welche neuen Elemente verwendet werden sollen. CSS3 selbst ist nicht auf dem CSS2.1-Level, was der CSS-Validator von jigsaw.w3.org auch beanstandet, dennoch lohnt sich schon einmal der Blick auf die standardmäßige Technologie von morgen.
Abgerundete Ecken
Diese Eigenschaft läuft auf allen gängigen aktualisierten Browsern.
Der Eigenschaftsname border-radius verrät bereits was hier passiert. Es wird einfach nur der Radius festgelegt. Für ältere Browserversionen des Firefox wird ggf. die zweite Angabe -moz-border-radius benötigt.
Schatten-Effekt
Diese Eigenschaft läuft auf allen gängigen aktualisierten Browsern.
Den Schatteneffekt bewirkt die Eigenschaft box-shadow (alternativ -moz-box-shadow für die älteren Firefox-Versionen). Der erste Wert ist für die Breite des Schattens, der zweite für die Höhe des Schattens zuständig. Die Kantenschärfe lässt sich mit dem dritten Wert einstellen, 0 = scharfe Kanten, mit zunehmender Zahl ist der Schatten verschwommener.
Rotieren eines Elementes
Dieser Effekt funktioniert zwar bei allen gängigen aktualisierten Browsern, allerdings wird die Schrift z.B. im Safari oder Chrome etwas verzerrt dargestellt.
Mit der Eigenschaft transform lässt sich die Rotation einstellen. Die Einheit ist deg = degrees (Grad). Die verschiedenen Browser benötigen alternativ die Eigenschaften -webkit-transform (Safari, Chrome), -ms-transform (Internet Explorer), -moz-transform (Firefox) und -o-transform (Opera).
Transparenz
Transparente Elemente lassen sich auf allen gängigen aktualisierten Browsern darstellen.
Die Eigenschaft opacity mit einem Wertebereich zwischen 0 (0% Sichtbarkeit) und 1 (100% Sichtbarkeit) ist für den transparenten Effekt zuständig. Der Mozilla Firefox benötigt zusätzlich das -moz-opacity. Der Internet Explorer unterstützt das opacity nicht, in diesem Fall dient die Eigenschaft filter (funktioniert nur für den IE), welcher die Werte diesmal direkt in % zugewiesen werden.