CSS – Elemente mit Schatten versehen

Die Zeiten in denen man Elemente mit irgendwelchen Tricks mit einem Schatten versehen konnte, sind zum Glück weitestgehend vorbei. Zumindest sofern der Browser CSS3
unterstützt.

Will man eine HTML-Element, z.B. ein DIV mit einem Schatten versehen, kann man dies recht leicht mittels CSS realisieren:

box-shadow:3px 3px 3px #a8a8a8;

Kurze Erkärung, die ersten beiden Werte geben den Abstand in X und Y Richtung wieder, der dritte Wert den “Blur” Radius und zuletzt die Farbe des Schattens:

Schatten

Wer etwas mit den Einstellungen herumspielt entdeckt schnell neue Möglichkeiten, z.B. statt einem Schatten einen Glow-Effect:

box-shadow:0px 0px 10px #ec0707;

Rotes Glühen

Auch mehrere Schatten lassen sich kombinieren:

box-shadow: 8px 8px 8px green,
        -8px 8px 8px red,         
        8px -8px 8px blue,
        -8px -8px 8px black;

Mehrere Schatten

Soll der Schatten innen und nicht außen sein, auch kein Problem:

box-shadow: inset 3px 3px 3px #a8a8a8;

Schatten Innen

Viel Spaß beim Experimentieren!

Kommentar hinterlassen

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