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.
Gelber Nachen
Aquarell auf Galleriepapier
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 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.
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.