CSS box-shadow – Schatten und Schlagschatten

Schatten hinter Elementen

box-shadow kann für so ziemlich alles angesetzt werden, was eine Box bildet: auf div-Elemente, auf Tabellen, auf Formulare. Für Text allerdings ist CSS text-shadow die Alternative.

Gelber Nachen

Aquarell auf Galeriepapier

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.

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: drop-shadow(). drop-shadow ist neben Schwarzweiß, Negativ und Sepia ein Wert von CSS filter.

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        Schattens
                  │              │
                  ▼              ▼
box-shadow: 10px 10px 15px 7px silver;
             ▲          ▲ 
             │          │
     Horizontaler       │ 
     Versatz       Größe des 
                   Schatten

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.

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

box-shadow inset – nach innen

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

              ┌── Schlüsselwort Schatten nach innen
              ▼
box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
                    ▲   ▲    ▲   ▲
                    │   │    │   │
                    │   │    │   └── keine zusätzliche Ausbreitung
                    │   │    │
                    │   │    └── 5px Weichzeichnungsradius 
                    │   │
   10px nach rechts ┘   └── 10px nach unten 
   

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

box-shadow – mehrere Schatten animieren

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.

Kein box-shadow, kein drop-shadow mit clip-path

Zwar passt sich box-shadow dem border-radius eines Elements an, nicht aber an einen clip-path.

box-shadow vs drop-shadow

box-shadow wirkt auf das gesamte Element – einschließlich des Rahmens und Hintergrunds. drop-shadow() hingegen ist Schatten für transparente Inhalte (Filter-Effekt) und berücksichtigt nur die sichtbaren Pixel des Elements.