Index 2 • Schatten mit CSS3
CSS3 box-shadow - Schatten aussen
Um Schattenelemente (z.b. für Bilder oder Buttons) einzubauen, mußte man früher erst die entsprechenden Bilder im Grafik-Programm herstellen. Mit der CSS3-Anweisung "box-shadow" ist das jetzt einfacher geworden, da man den Schatten (Richtung, Größe und Härte änderbar) direkt über die Anweisung im CSS-Quellcode ausführen kann.
Nachstehend einige Beispiele für den box-shadow-Befehl:
box-shadow: 5px 3px 8px grey;
box-shadow: 10px 20px 30px #808080;
box-shadow: -8px 20px 25px #9F9F9F;
box-shadow: 15px -18px 25px #5F5F5F;
Der erste Wert zeigt die Verschiebung nach rechts an, der zweite die Verschiebung nach unten. bei negative Werten (mit einem Minus-Zeichen davor), geht es in die andere Richtung, nämlich nach links und oben.
Der dritte Wert steht für die Härte bzw. Weichheit des Schattens und der letzte Wert ist die Farbangabe.
Es gibt noch sogenannte Präfixe für ältere Browser, die man ebenfalls angeben kann, als letztes sollte aber immer der Standard-Befehl genannt werden.
Nachstehend ein Beispiel für Präfix-Anweisungen bei box-shadow:
-moz-box-shadow: 3px 6px 8px grey;
-webkit-box-shadow: 3px 6px 8px grey;
-o-box-shadow: 3px 6px 8px grey;
-ms-box-shadow: 3px 6px 8px grey;
box-shadow: 3px 6px 8px grey;
Die Anweisungen stehen für die Browser Mozilla (-moz), Safari und Chrome (-webkit), Opera (-o) und Internet Explorer (-ms).
CSS3 box-shadow - Innenschatten
Will man auf einem Element (z.b. eine Box oder ein Bild) einen Schatten nach innen statt nach aussen setzen, fügt man beim box-shadow-Befehl das Wort "inset" hinzu. Ein Beispiel wie folgt:
box-shadow: inset 3px 6px 8px grey;
CSS3 box-shadow - Gleichzeitig Innen-und AussenSchatten
Durch ein Komma getrennt kann man auch beide Schattenarten auf ein Element legen.
box-shadow: inset 0px 0px 12px #AFAFAF, 0px 0px 8px #000;
P.S. Für Schrift-Schatten gibt es einen anderen CSS3-Befehl namens "text-shadow", siehe hier auf index3.html
|
|
|