CSS box-shadow – Schatten und Schlagschatten

CSS box-shadow, Schlagschatten, Drop-Shadow

CSS box-shadow erzeugt einen oder mehrere Schlagschatten (auch Drop-Shadow) für ein HTML-Element ohne Einsatz von Bitmaps. Heute wird box-shadow von allen modernen Browsern ohne Browser-Präfix gerendert.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Schatten hinter Elementen

box-shadow kann für so ziemlich alles angesetzt werden, was eine Box bildet: auf div-Elemente, auf Texte und auf Tabellen.

aqua-gelber-nachen-480

Gelber Nachen

Aquarell auf Galeriepapier

aqua-fischerboot-480

Gelber Nachen

Wasserfarbe auf Hahnemühle

Der Schatten wird nur außerhalb oder innerhalb des Elements gerendert, auch wenn das Element semitransparent oder freigestellt ist. Das Abrunden mit border-radius hingegen wirkt.

Schatten unter freigestelltem Motiv
img.boxfish {
	box-shadow: 10px 20px 15px silver;
	border-radius: 20px;
}

Für den Schatten hinter einem freigestellten Motiv gibt es eine Alternative: CSS filter mit der Option drop-shadow (neben Schwarzweiß, Negativ und Sepia).

box-shadow Position

box-shadow beeinflußt das Layout und die Position benachbarter Elemente nicht, kann sich aber über bzw. unter benachbarte Elemente legen.

box-shadow: 10px 10px 15px silver;
              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 ein box-shadow bei positiven Werten für den horizontalen und vertikalen Abstand nach rechts 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 im box-shadow 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 inset – nach innen

Das optionale Schlüsselwort inset rendert den Schatten innerhalb des Elements und zeigt sich wie eine Vertiefung.

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

Bilder verdecken den inneren Schatten, so dass box-shadow inset nur sichtbar ist, wenn das Bild transparente Bereiche hat.

Hintergrund
Transparenter Hintergrund

Mehr als ein box-shadow

Mehrere Schatten entstehen durch eine Komma-getrennte Liste. Die einzelnen Schatten liegen dabei von vorn (erster Schatten der Liste) nach hinten (letzter Schatten der Liste).

.circle {
  position:relative;
  cursor:pointer;
  margin:0 auto;
  width:220px;
  height:220px;
  overflow:hidden;
  transform:translateZ(0)
}

.circle:before {
  border-radius:50%;
  content:"";
  position:absolute;
  top:0; left:0;
  width:inherit;
  height:inherit;
  box-shadow:
      inset 150px 0 0 hsla(230,80%,70%,0.6), 
      inset 0 150px 0 hsla(230,80%,70%,0.6), 
      inset -150px 0 0 hsla(230,80%,70%,0.6), 
      inset 0 -150px 0 hsla(230,80%,70%,0.6);
  transition:box-shadow 0.75s
}

.circle:hover:before{ 
  box-shadow:
      inset 36px 0 0 hsla(90,50%,40%,0.4),
      inset 0 36px 0 hsla(240,50%,40%,0.2), 
      inset -36px 0 0 hsla(300,50%,40%,0.2), 
      inset 0 -36px 0 hsla(60,50%,40%,0.2)
}

Der Effekt wird durch :hover angestoßen – kritisch für Touchscreens, die nicht unbedingt auf das Hovern mit der Maus reagieren, und wenn doch, den Hover-Zustand einfrieren und beim Heben des Fingers nicht zurück in den Standard-Zustand gehen.

box-shadow mit border-radius

Wenn border-radius für ein Element mit box-shadow angesagt ist, folgt der Schatten der Form der Box – sowohl beim Schatten außerhalb als auch innerhalb des Elements.

Der Schatten der Box wächst mit, wenn border für das Element angegeben wird.

box-shadow und border-image ist nicht unbedingt ein brauchbarer Effekt, auch wenn das Bild für border-image einen transparenten Hintergrund hat.

box-shadow passt sich nicht an das border-image, sondern an die Box an, denn border-image hat keinen Einfluss auf box-shadow.

Omnia Mea Mecum Porto

Am Rande: box-shadow wirkt auch bei Texten, aber genauso wie bei border-image bleibt die Form eines Zeichens oder eines Textes ein Rechteck und box-shadow erzeugt einen eckigen Rahmen. Dafür haben wir dann also text-shadow.