Schlagschatten

Beispiele

1

2

3

4

5

6

7

CSS-Definitionen Box 1

#main .ce_text.css3-shadow
{
background:#dfdfdf;
-moz-box-shadow:0 2px 12px #999;
-webkit-box-shadow:0 2px 12px #999;
box-shadow:0 2px 12px #999;
}

CSS-Definitionen Box 2

#main .ce_text.css3-shadow
{
background:#D6700B;
-moz-box-shadow:4px 4px 8px #D6700B;
-webkit-box-shadow:4px 4px 8px #D6700B;
box-shadow:4px 4px 8px #D6700B;
}

CSS-Definitionen Box 3

#main .ce_text.css3-shadow
{
background:#D6700B;
-moz-box-shadow:0 0 30px #D6700B;
-webkit-box-shadow:0 0 30px #D6700B;
box-shadow:0 0 30px #D6700B;
}

CSS-Definitionen Box 4

#main .ce_text.css3-shadow
{
background:#D6700B;
-moz-box-shadow:2px 2px 6px #666 inset;
-webkit-box-shadow:2px 2px 6px #666 inset;
box-shadow:2px 2px 6px #666 inset;
}

CSS-Definitionen Box 5

#main .ce_text.css3-shadow
{
background:#D6700B;
-moz-box-shadow:6px 6px 10px #AA570A inset;
-webkit-box-shadow:6px 6px 10px #AA570A inset;
box-shadow:6px 6px 10px #AA570A inset;
}

CSS-Definitionen Box 6

#main .ce_text.css3-shadow
{
background:#D6700B;
-moz-box-shadow:0 0 50px #AA570A inset;
-webkit-box-shadow:0 0 50px #AA570A inset;
box-shadow:0 0 50px #AA570A inset;
}

CSS-Definitionen Box 7

#main .ce_text.css3-shadow
{
	background:#D6700B;
	-moz-box-shadow:0 0 10px #666 inset, 2px 2px 10px #666;
	-webkit-box-shadow:0 0 10px #666 inset, 2px 2px 10px #666;
	box-shadow:0 0 10px #666 inset, 2px 2px 10px #666;
}

Die CSS3-Eigenschaft box-shadow

Der Schlagschatten wird durch die CSS3-Eigenschaft box-shadow erzeugt.
Dabei gelten diese Eigenschaften:
Versatz horizontal Versatz vertikal Unschärfe Farbe

Die Schreibweise dafür lautet:
box-shadow:2px 2px 8px #666;

Es lassen sich auch mehrere Schlagschatten definieren ( Beispiel 7). Dazu werden die weiteren Angaben durch Komma getrennt angefügt:
box-shadow:0 0 10px #666 inset, 2px 2px 10px #666;

Für die Gecko-Browser (Firefox bis Version 4) sowie die Webkit-Browser (Safari ab 3.1 und Chrome ab 4.0) werden entsprechend die Eigenschaften spezifiziert angeben:

/* Gecko-Browser */
-moz-box-shadow:2px 2px 8px #666;
/* Webkit-Browser */
-webkit-box-shadow:2px 2px 8px #666;
/* CSS3 allgemein */
box-shadow:2px 2px 8px #666;

nach oben