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

.shadow {
       horizontaler    vertikaler 
       Versatz   ┐   ┌ Versatz
                 │   │
                 ▼   ▼
    box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);
                          ▲    ▲
                          │    │
         Unschärfenradius ┘    └ Farbe des Schattens
}

box-shadow ist eine grafische Darstellung außerhalb der Box und keine Layout-Größe wie z. B. width oder padding, die relativ zum Elternelement oder zur eigenen Boxgröße notiert werden können. box-shadow wird von der Rendering-Engine als absolutes grafisches Element behandelt:

horizontaler Versatz, vertikaler Versatz und Unschärfenradius müssen in absoluten Größenangaben wie px oder em vorliegen. Prozent-Angaben % funktionieren nicht bei box-shadow.

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: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset]

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

    offset-x ┐   offset-y      color
             │     │             │
             ▼     ▼             ▼
box-shadow: 10px 10px 15px 7px silver;
                       ▲   ▲
                       │   │
           blur-radius ┘   └ spread-radius
                  

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).

<div style="width: 240px; height: 240px; margin: 10px auto">
	<div class="circle">
	</div>
</div>

.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.

Was ist der Unterschied zwischen box-shadow und drop-shadow?

box-shadow wirkt auf das gesamte Element – einschließlich des Rahmens und Hintergrunds und bildet immer eine rechteckige Box. drop-shadow() hingegen ist Schatten für transparente Inhalte (Filter-Effekt) und berücksichtigt nur die sichtbaren Pixel des Elements. So wirkt drop-shadow wie ein »echter« Schatten.