CSS > CSS3 Schatten
Autor: dr.allwissend
CSS3 bietet die Möglichkeit Textschatten anzuwenden.
Ich verwende hier jeweils die Kurzvariante des box-shadow. Hier die Erklärung:
Der erste Wert (10px) steht für die X-Achsenverschiebung des Schattens, der zweite Wert für die Y-Achsenverschiebung. Optional kann man dann noch die Schattenhärte definieren, wie im nächsten Beispiel. Als vierter Wert folgt dann die Farbe des Schattens.
Hier ist der dritte Wert definiert, die "Weichheit" des Schattens.
Mit negativen X- und Y-Achsenwerten wird der Schatten nach links bzw. nach oben verschoben.
Mit dem CSS3 Befehl border-radius kann man die Ecken abrunden. Wenn man gleichzeitig einen Schatten auf ein Objekt anwendet, wird der Schatten ebenfalls abgerundet. Da dieser Befehl noch nicht standardmäßig von allen Browsern unterstützt wird, müssen hier zur Zeit ebenfalls die Prefixe verwendet werden.
Es können mit box-shadow auch mehrere Schatten auf einmal definiert werden. Damit lassen sich dann beispielsweise "Glühende Boxen" oder solche Farbenspiele wie bei diesem Beispiel erstellen.
Die einzelnen Schatten werden durch ein Komma separiert.
Es gibt darüber hinaus noch eine Option einen inneren Schatten zu erstellen. Dazu muss man die Eigenschaft "inset" am Anfang hinzufügen.
Das ganze funktioniert auch mit mehreren Schatten, wie man am farbigen Beispiel sehen kann.
Damit der Box-Shadow ohne Probleme in allen gängigen Browsern funktioniert muss man bei einigen Browsern ein Prefix festlegen.
Bei Google Chrome und Safari muss man derzeit das Prefix „-webkit“ verwenden, bei Mozilla Firefox „-moz“ damit der Befehl box-shadow funktioniert.
Der Browser Opera 10.5 benötigt kein Prefix, dieser unterstützt die CSS3 Funktion Box-Shadow ohne Prefixe.
Der Internet Explorer ist zur Zeit nicht in der Lage, die CSS3 Box-Shadow Funktion darzustellen. Es gibt jedoch einige Tricks, wie man die Funktion trotzdem nutzen kann. z.B. mit http://www.fetchak.com/ie-css3/ - IE-Css3 ein Script welches in Vector Markup Language (VML) geschrieben ist, und die fehlenden CSS Implementationen wie Abgerundete Ecken und Unschärfe Effekte.
Keine Bewertung.
Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: schatten css3 box-shadow
Schritt 1 - Harter Schatten Rechts unten
Code:
box-shadow: 10px 10px #999; -moz-box-shadow: 10px 10px #999; /* Mozilla Firefox */ -webkit-box-shadow: 10px 10px #999; /* Google Chrome */ |
Ich verwende hier jeweils die Kurzvariante des box-shadow. Hier die Erklärung:
Der erste Wert (10px) steht für die X-Achsenverschiebung des Schattens, der zweite Wert für die Y-Achsenverschiebung. Optional kann man dann noch die Schattenhärte definieren, wie im nächsten Beispiel. Als vierter Wert folgt dann die Farbe des Schattens.
Schritt 2 - Weicher Schatten Rechts unten
Code:
box-shadow: 10px 10px 5px #999; -moz-box-shadow: 10px 10px 5px #999; /* Mozilla Firefox */ -webkit-box-shadow: 10px 10px 5px #999; /* Google Chrome */ |
Hier ist der dritte Wert definiert, die "Weichheit" des Schattens.
Schritt 3 - Harter Schatten Links oben
Code:
box-shadow: -10px -10px #999; -moz-box-shadow: -10px -10px #999; /* Mozilla Firefox */ -webkit-box-shadow: -10px -10px #999; /* Google Chrome */ |
Mit negativen X- und Y-Achsenwerten wird der Schatten nach links bzw. nach oben verschoben.
Schritt 4 - Weicher Schatten Links oben
Code:
box-shadow: -10px -10px 5px #999; -moz-box-shadow: -10px -10px 5px #999; /* Mozilla Firefox */ -webkit-box-shadow: -10px -10px 5px #999; /* Google Chrome */ |
Schritt 5 - Abgerundete Schatten
Mit dem CSS3 Befehl border-radius kann man die Ecken abrunden. Wenn man gleichzeitig einen Schatten auf ein Objekt anwendet, wird der Schatten ebenfalls abgerundet. Da dieser Befehl noch nicht standardmäßig von allen Browsern unterstützt wird, müssen hier zur Zeit ebenfalls die Prefixe verwendet werden.
Code:
box-shadow: 10px 10px 0px #999; -moz-box-shadow: 10px 10px 0px #999; /* Mozilla Firefox */ -webkit-box-shadow: 10px 10px 0px #999; /* Google Chrome */ border-radius:7px; -moz-border-radius:7px; /* Mozilla Firefox */ -webkit-border-radius:7px; /* Google Chrome */ |
Schritt 6 - Mehrere Schatten benutzen
Es können mit box-shadow auch mehrere Schatten auf einmal definiert werden. Damit lassen sich dann beispielsweise "Glühende Boxen" oder solche Farbenspiele wie bei diesem Beispiel erstellen.
Die einzelnen Schatten werden durch ein Komma separiert.
Code:
box-shadow: 10px 10px 15px #FF0, -10px 10px 15px #F00, 10px -10px 15px #6F0, -10px -10px 15px #0FF; -moz-box-shadow: 10px 10px 15px #FF0, -10px 10px 15px #F00, 10px -10px 15px #6F0, -10px -10px 15px #0FF; /* Mozilla Firefox */ -webkit-box-shadow: 10px 10px 15px #FF0, -10px 10px 15px #F00, 10px -10px 15px #6F0, -10px -10px 15px #0FF; /* Google Chrome */ |
Schritt 7 - Innerer Schatten
Es gibt darüber hinaus noch eine Option einen inneren Schatten zu erstellen. Dazu muss man die Eigenschaft "inset" am Anfang hinzufügen.
Code:
box-shadow:inset 10px 10px 15px #999; -moz-box-shadow:inset 10px 10px 15px #999; /* firefox */ -webkit-box-shadow:inset 10px 10px 15px #999; /* chrome */ |
Das ganze funktioniert auch mit mehreren Schatten, wie man am farbigen Beispiel sehen kann.
Code:
box-shadow:inset 10px 10px 15px #FF0,inset -10px 10px 15px #F00,inset 10px -10px 15px #6F0,inset -10px -10px 15px #0FF; -moz-box-shadow:inset 10px 10px 15px #FF0,inset -10px 10px 15px #F00,inset 10px -10px 15px #6F0,inset -10px -10px 15px #0FF; /* firefox */ -webkit-box-shadow:inset 10px 10px 15px #FF0,inset -10px 10px 15px #F00,inset 10px -10px 15px #6F0,inset -10px -10px 15px #0FF; /* chrome */ |
Schritt 8 - Prefixe - Box-Shadow
Damit der Box-Shadow ohne Probleme in allen gängigen Browsern funktioniert muss man bei einigen Browsern ein Prefix festlegen.
Bei Google Chrome und Safari muss man derzeit das Prefix „-webkit“ verwenden, bei Mozilla Firefox „-moz“ damit der Befehl box-shadow funktioniert.
Der Browser Opera 10.5 benötigt kein Prefix, dieser unterstützt die CSS3 Funktion Box-Shadow ohne Prefixe.
Der Internet Explorer ist zur Zeit nicht in der Lage, die CSS3 Box-Shadow Funktion darzustellen. Es gibt jedoch einige Tricks, wie man die Funktion trotzdem nutzen kann. z.B. mit http://www.fetchak.com/ie-css3/ - IE-Css3 ein Script welches in Vector Markup Language (VML) geschrieben ist, und die fehlenden CSS Implementationen wie Abgerundete Ecken und Unschärfe Effekte.
Keine Bewertung.
Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: schatten css3 box-shadow
Kommentare
Kommentare schreiben
Ähnliche Tutorials
Ähnliche Tutorials zu 'CSS3 Schatten'
