CSS3: box-shadow

Heute wieder ein neuer CSS3 Artikel. Nachdem ich letztes mal schon einiges über border-radius geschrieben habe, geht es dieses mal um den box-shadow.

Neben border-radius wohl die beliebteste CSS3 Eigenschaft. Diese ermöglicht uns, Elementen einen Schatten zu geben. Gucken wir uns doch dazu ein einfaches Beispiel an.

    background: #21A3D6;
    height: 150px;
    width: 150px;
    margin: 15px auto;
    -moz-box-shadow: 10px 10px 5px #ccc;
	-webkit-box-shadow: 10px 10px 5px #ccc;
	box-shadow: 10px 10px 5px #ccc;

Was kann man noch machen?

Jetzt wissen wir schonmal, was man mit der Eigenschaft machen kann und wie sie aussehen kann. Gucken wir uns doch wieder noch ein paar Möglichkeiten an. Ich werde hier nur an den Schattenwerten etwas ändern, deswegen werde ich auch nur den Code für den Schatten hier zeigen.

Einen Schatten rund um die Box

Hier ein Beispiel für einen leichten Schatten rund um die Box herum.

 	-moz-box-shadow: 0 0 10px #888;
	-webkit-box-shadow: 0 0 10px #888;
	box-shadow: 0 0 10px #888;

Harte Schatten

Einen harten Schatten, der 5px nach rechts und 5px nach unten verschoben ist.

 	-moz-box-shadow: 5px 5px 0px #888;
	-webkit-box-shadow: 5px 5px 0px #888;
	box-shadow: 5px 5px 0px #888;

Das ganze geht auch in die andere Richtung. Einfach ein Minuszeichen vor die 5px setzen.

 	-moz-box-shadow: 5px 5px 0px #888;
	-webkit-box-shadow: 5px 5px 0px #888;
	box-shadow: 5px 5px 0px #888;

Großer Schatten

Außerdem gibt es noch die Möglichkeit die größe des Schattens zu verändern. Dies funktioniert ähnlich wie wenn ihr einem Element einen padding gebt.

	-moz-box-shadow: 0 0 10px 10px #888;
	-webkit-box-shadow: 0 0 10px 10px #888;
	box-shadow: 0 0 10px 10px #888;

Schatten nach innen

Das alles bietet uns schon eine ganze Menge Gestaltungsmöglichkeiten. Aber box-shadow hat noch einiges mehr auf Lager. Wir können den Schatten mit dem Attribut inset zum Beispiel nach innen fallen lassen!

Ich habe hier ein helles blau gewählt. Alle Effekte die ich oben erwähnt habe, kann man mit einem inset auch nach innen anwenden. Probiert einfach ein bisschen aus und lasst eurer Kreativität freien lauf.

	-moz-box-shadow: inset 10px 10px 20px #7ddaff;
	-webkit-box-shadow: inset 10px 10px 20px #7ddaff;
	box-shadow: inset 10px 10px 20px #7ddaff;

Mehrere Schatten

Damit sind wir noch immer nicht am Ende. Man kann mit box-shadow noch mehr machen. Und zwar kann man mehrere Schatten hintereinander hängen.

Hier sehr ihr drei verschiedene Schatten. Einen nach innen und zwei nach außen. Die Möglichkeit mehrere Schatten hintereinander zu hängen gibt uns unglaublich viele Möglichkeiten. Probiert es einfach aus!

	-webkit-box-shadow: inset 10px 10px 0px #2ab7ec, 8px 8px 0px 0px #156785, 17px 16px 2px #999;
	-moz-box-shadow: inset 10px 10px 0px #2ab7ec, 8px 8px 0px 0px #156785, 17px 16px 2px #999;
	box-shadow: inset 10px 10px 0px #2ab7ec, 8px 8px 0px 0px #156785, 17px 16px 2px #999;

Browser Unterstützung

Natürlich auch immer wieder wichtig. Box-Shadow kann in allen gängigen Browsern eingesetzt werden. Das bedeutet, dass es keine Unterstützung für den IE6/7/8 gibt. Hier muss man es entweder über Bilder regeln, oder man verzichtet auf den Schatten.

GD Star Rating
loading...
CSS3: box-shadow, 7.0 out of 10 based on 1 rating

Erstellt: 26. Februar 2012 Zuletzt bearbeitet: 26. Februar 2012 Autor: Ratze

2 Gedanken zu „CSS3: box-shadow“

  • Mario Steuck sagt:

    schöner artikel. ich benutze den schatten bei boxen, egal ob es im ie angezeigt wird oder nicht. ich nehme einfach keine rücksicht mehr auf die ganzen ie’s. vielleicht bekomt der ein oder andere ie-nutzer so mehr lust auf einen anständigen browser umzusteigen…

    Antworten
    • Ratze sagt:

      Hallo Mario!

      Schön, dass dir mein Artikel gefällt! :)

      Ich sehe das wie du. Ich benutze alles, was mit CSS3 möglich ist. Wer keinen vernünftigen Browser benutzt, der hat halt selber schuld. Dort sieht die Seite dann halt nicht so schön aus.

      Antworten

Schreibe einen Kommentar

  • Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.