CSS, HTML und Javascript mit {stil}

CSS box-shadow – Schatten und Schlagschatten

CSS Schatten, auch Drop-Shadow oder Schlagschatten-Effekt

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.

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

2014Und ab die PostPratchet
2014Auf leisen SohlenMiller

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

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;

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.

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.

Box Shadow