The CSS Podcast – 017: Shadows
Angenommen, Sie haben ein Design zum Erstellen erhalten. In diesem Design ist ein Bild eines ausgeschnittenen T-Shirts mit einem Schlagschatten zu sehen. Der Designer teilt Ihnen mit, dass das Produktbild dynamisch ist und über das Content-Management-System aktualisiert werden kann. Daher muss auch der Schlagschatten dynamisch sein. Anstelle eines T-Shirts könnte das Bild ein Schild, eine Hose oder ein anderes Kleidungsstück sein. Wie machen Sie das mit CSS?
CSS hat die Properties box-shadow und text-shadow, aber das Bild besteht nicht aus Text, sodass Sie text-shadow nicht verwenden können.
Wenn Sie box-shadow verwenden, befindet sich der Schatten auf dem umgebenden Feld und nicht um das T-Shirt.
Glücklicherweise gibt es eine weitere Option: den drop-shadow()-Filter.
Auf diese Weise können Sie genau das tun, wonach die Designschaffenden gefragt haben.
Es gibt viele Optionen für Schatten in CSS, die alle für einen anderen Anwendungsfall entwickelt wurden.
Kastenschatten
Mit der Eigenschaft box-shadow können Sie dem Feld eines HTML-Elements Schatten hinzufügen.
Sie funktioniert mit Block- und Inline-Elementen.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
Für box-shadow gelten folgende Werte:
- Horizontaler Offset: Eine positive Zahl schiebt den Wert von links nach oben, durch eine negative Zahl von rechts nach links.
- Vertikaler Offset: Eine positive Zahl schiebt den Wert von oben nach unten, eine negative Zahl von unten nach oben.
- Weichzeichnerradius: Eine größere Zahl erzeugt einen stärker verschwommenen Schatten, eine kleine Zahl einen schärferen Schatten.
- Streuungsradius (optional): Eine größere Zahl vergrößert den Schatten und eine kleinere Zahl verringert ihn. Er hat dieselbe Größe wie der Weichzeichner-Radius, wenn er auf 0 festgelegt ist.
- Color (Farbe): Beliebiger gültiger Farbwert. Wenn dies nicht definiert ist, wird die berechnete Textfarbe verwendet.
Wenn Sie einen Feldschatten als inneren Schatten statt als den standardmäßigen äußeren Schatten festlegen möchten, fügen Sie vor den anderen Attributen das Keyword inset hinzu.
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
Mehrere Schatten
Mit box-shadow kannst du beliebig viele Schatten hinzufügen.
Fügen Sie eine durch Kommas getrennte Sammlung von Wertesätzen hinzu:
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
Eigenschaften, die sich auf den Feldschatten auswirken
Wenn du deinem Feld ein border-radius hinzufügst, wirkt sich das auch auf die Form des Kastenschattens aus.
Dies liegt daran, dass CSS einen Schatten basierend auf der Form der Box erstellt, als würde das Licht darauf zeigen.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
Wenn sich das Feld mit box-shadow in einem Container mit overflow: hidden befindet, löst sich der Schatten nicht aus diesem Überlauf aus.
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
Textschatten
Die Eigenschaft text-shadow ist der Eigenschaft box-shadow sehr ähnlich.
Es funktioniert nur auf Textknoten.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
Die Werte für text-shadow sind die gleichen wie box-shadow und in derselben Reihenfolge.
Der einzige Unterschied ist, dass text-shadow keinen spread-Wert und kein inset-Keyword hat.
Wenn Sie ein box-shadow hinzufügen, wird es an die Form der Box abgeschnitten, text-shadow hat jedoch keine Begrenzung.
Wenn Ihr Text vollständig oder halbtransparent ist, ist der Schatten durch den Text hindurch sichtbar.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Mehrere Schatten
Sie können mit text-shadow genauso viele Schatten hinzufügen, wie Sie möchten, genau wie mit box-shadow.
Fügen Sie eine durch Kommas getrennte Sammlung von Wertesätzen hinzu,
um tolle Texteffekte wie 3D-Text zu erstellen.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
Schlagschatten
Mit dem CSS-Filter drop-shadow können Sie einen Schlagschatten erstellen, der allen potenziellen Kurven eines Bilds folgt.
Dieser Schatten wird auf eine Alphamaske angewendet, was sehr nützlich ist, um einem Bild mit Ausschnitten einen Schatten hinzuzufügen, wie im Fall der Einführung dieses Moduls.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
Der Filter drop-shadow hat die gleichen Werte wie box-shadow, aber die Keywords inset und spread sind nicht zulässig. Sie können beliebig viele Schatten hinzufügen, indem Sie mehrere Instanzen von drop-shadow-Werten zum Attribut filter hinzufügen.
Bei jedem Schatten wird der letzte Schatten als Referenzpunkt für die Positionierung verwendet.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Schatten
Welcher Schattenwert unten ist spezifisch für box-shadow?
insetinset ist ein Keyword, das auch für box-shadow eindeutig ist.Für ein Element sind nur 13 Feldschatten zulässig.