Tutorials Upload

CSS > CSS3 Schatten

Autor: dr.allwissend
CSS3 bietet die Möglichkeit Textschatten anzuwenden.

Schritt 1 - Harter Schatten Rechts unten

Bild zu Schritt 1  -


Code:


box-shadow: 10px 10px #999;
-moz-box-shadow: 10px 10px #999; /* Mozilla Firefox */
-webkit-box-shadow: 10px 10px #999; /* Google Chrome */

Schritt 2 - Weicher Schatten Rechts unten

Bild zu Schritt 2  -


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

Bild zu Schritt 3  -


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

Bild zu Schritt 4  -


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

Bild zu Schritt 5  -

Mit dem CSS3 Befehl border-radius
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

Bild zu Schritt 6  -


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

Bild zu Schritt 7  -


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

http://www.fetchak.com/ie-css3/

Keine Bewertung.

Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: schatten css3 box-shadow

Kommentare

Kommentare schreiben
Um einen Kommentar zu schreiben musst du eingeloggt sein.

Noch nicht registriert?

Ähnliche Tutorials

Ähnliche Tutorials zu 'CSS3 Schatten'