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.
| 2014 | Und ab die Post | Pratchet |
| 2014 | Auf leisen Sohlen | Miller |
Der Schatten wird nur außerhalb oder innerhalb des Elements gerendert, auch wenn das Element semitransparent ist.
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.