Mai 2011

CSS3 Box-Shadow • Drop-Shadow

Die CSS-Eigenschaft box-shadow erzeugt einen Drop-Shadow oder Schlagschatten für einen HTML-Block ohne Einsatz von Pixelbildern.

Der Schatten wird nur außerhalb des Elements gerendert, auch wenn das Element semitransparent ist.

box-shadow: 10px 10px 15px silver;

Heute wird box-shadow von allen modernen Browsern ohne Browser-Präfix gerendert.

CSS3 erblich: nein

              Vertikaler  Farbe des 
              Versatz     Schatten
                  |           |
box-shadow: 10px 10px 15px silver inset;
             |          |           |
     Horizontaler       |           |
     Versatz       Größe des     optional:
                   Schatten      Schatten nach innen

Per Vorgabe fällt der Schatten bei positiven Werten für den horizontalen und vertikalen Abstand nach rechts und nach unten. Ein negativer Wert für den horizontalen Versatz zieht den Schlagschatten nach links, ein negativer Wert für den vertikalen Versatz zieht den Schlagschatten nach oben.

Wird das Schlüsselwort inset aufgeführt, fällt der Schatten innerhalb der Box, so dass das Element wie eine Vertiefung oder eingraviert wirkt.

box-shadow nach links oben

Mit negativen Werten für die Entfernung kann der Schatten in eine andere Richtung fallen.

box-shadow: -10px -10px 5px silver;

box-shadow nach innen

Das optionale Schlüsselwort inset rendert den Schatten innerhalb des Elements.

box-shadow: 10px 10px 4px hsla(300,15%,25%,0.7) inset;