Schatten

The CSS Podcast – 017: Schatten

Angenommen, Sie haben ein Design erhalten, das Sie mit einem Bild eines T-Shirts mit einem Schlagschatten. Die Designschaffenden sagen Ihnen, dass das Produktbild dynamisch ist. und können über das Content-Management-System, Daher muss auch der Schlagschatten dynamisch sein. Anstelle eines T-Shirts Das Bild kann eine Sonnenblende, Shorts oder ein anderes Element sein. Wie machen Sie das mit Preisvergleichsportalen?

Preisvergleichsportal hat die box-shadow und text-shadow-Properties aber das Bild ist kein Text, daher kannst du text-shadow nicht verwenden. Wenn Sie box-shadow verwenden, befindet sich der Schatten auf dem umgebenden Rechteck. nicht um das T-Shirt herum.

Glücklicherweise gibt es eine weitere Option: drop-shadow()-Filter. Auf diese Weise können Sie genau das tun, was die Designschaffenden gefordert haben. In CSS gibt es viele Optionen für Schatten. die jeweils für einen anderen Anwendungsfall konzipiert sind.

Rahmenschatten

Die Eigenschaft box-shadow dient zum Hinzufügen von Schatten zum Feld eines HTML-Elements. Dies funktioniert bei Block- und Inline-Elementen.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Die Werte für box-shadow werden so angeordnet:

1. Horizontaler Offset: Eine positive Zahl verschiebt sie von links heraus, eine negative Zahl von rechts.
2. Vertikaler Offset: drückt sie eine positive Zahl von oben nach unten, und eine negative Zahl schiebt sie von unten nach oben.
3. Weichzeichner-Radius: führt eine größere Zahl zu einem weichgezeichneten Schatten, während eine kleine Zahl einen schärferen Schatten erzeugt.
4. Streuradius (optional): Eine größere Zahl vergrößert den Schatten und eine kleinere verringert ihn. dieselbe Größe wie für den Weichzeichner-Radius festgelegt, wenn dieser auf 0 gesetzt ist.
5. Farbe: Beliebiger gültiger Farbwert. Wird kein Wert festgelegt, wird die berechnete Textfarbe verwendet.

Um einen kastenschatten zu einem inneren Schatten zu machen, anstelle des äußeren Standardschattens. Fügen Sie vor den anderen Eigenschaften ein inset-Keyword 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 können Sie beliebig viele Schatten hinzufügen. Fügen Sie dazu 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 "box-shadow" auswirken

Das Hinzufügen eines border-radius zu Ihrem Rechteck wirkt sich auch auf die Form des Kastenschattens aus. Dies liegt daran, dass CSS einen Schatten basierend auf der Form der Box erstellt. als ob das Licht darauf zeigt.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Wenn sich Ihre Box mit box-shadow in einem Container mit overflow: hidden befindet, auch der Schatten nicht aus diesem Überlauf herausbricht.

<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. Dies funktioniert nur auf Textknoten.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Die Werte für text-shadow sind die gleichen wie für box-shadow und in derselben Reihenfolge. Der einzige Unterschied besteht darin, dass text-shadow keinen spread-Wert und kein inset-Keyword hat.

Wenn Sie ein box-shadow-Element hinzufügen, wird es an die Form der Box abgeschnitten, aber text-shadow enthält kein Clipping. Wenn Ihr Text vollständig oder halbtransparent ist, ist der Schatten sichtbar.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Mehrere Schatten

Mit text-shadow können Sie beliebig viele Schatten hinzufügen. genau wie bei box-shadow. Fügen Sie eine durch Kommas getrennte Sammlung von Wertesätzen hinzu, und tolle Texteffekte wie 3D-Text erstellen.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Schlagschatten

Um einen Schlagschatten zu erhalten, der allen potenziellen Kurven eines Bildes folgt, verwenden Sie den CSS-Filter drop-shadow. Dieser Schatten wird auf eine Alpha-Maske angewendet und ist daher sehr nützlich, um einem ausgeschnittenen Bild 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 dieselben Werte wie box-shadow, aber das Keyword inset und der Wert spread sind nicht zulässig. Sie können beliebig viele Schatten hinzufügen, Durch Hinzufügen mehrerer Instanzen von drop-shadow-Werten zum Attribut filter. Für jeden Schatten wird der letzte Schatten als Referenzpunkt für die Positionierung verwendet.

Wissen testen

Testen Sie Ihr Wissen über Schatten