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