CSS: Box Shadow / Boxschatten und Text Shadow / Textschatten

Wie der Name schon sagt, erzeugen wir mit dem Box-Shadow (box-shadow) bzw. Text-Shadow (text-shadow) per CSS3 – ganz ohne Grafiken oder Hintergrundbilder – einen Schatten in einem Element oder auf einem Text. Wir können die Schatten-Verschiebung, die Weichzeichnung nach außen sowie den Überfluss einstellen. Der Überfluss regelt dabei, ab wann der Schatten weichgezeichnet wird. Ebenso können wir eine Schattenfarbe zuweisen. Komma-separiert ist es möglich, mit diesen CSS Befehlen auf Elementen mehrere Schatten zu definieren.

Weitere Anpassungen der Schriftdarstellung bieten CSS Befehle für Schriften. Für Rahmen und Innenabstände sowie Außenabstände gibt es ebenfalls CSS Anweisungen.

Beispiele

.element {
    -webkit-box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
    -moz-box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
    box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
}

.element {
    -webkit-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
  
    text-shadow: 2px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=2, offy=2);
}