drop-shadow()

Ein Schlagschatten ist im Wesentlichen eine verschwommene, versetzte Version der Alphamaske des Eingabebildes, die in einer bestimmten Farbe gezeichnet und unter dem Bild zusammengesetzt wird.

/* Two length values */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* Three length values */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* Two length values and a color */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* Three length values and a color */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)

/* Pass multiple drop-shadows to a filter to stack them */
drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)

Die drop-shadow()-Funktion akzeptiert einen Parameter vom Typ <shadow> (definiert in der box-shadow-Eigenschaft), mit der Ausnahme, dass das inset-Schlüsselwort und spread-Parameter nicht erlaubt sind.

<color> Optional

Gibt die Farbe für den Schatten an. Wenn nicht angegeben, wird der Wert der color-Eigenschaft aus dem übergeordneten Element verwendet.

<length>

Gibt die Offset-Länge des Schattens an. Dieser Parameter akzeptiert zwei oder drei Werte. Wenn zwei Werte angegeben sind, werden sie als <offset-x> (horizontale Verschiebung) und <offset-y> (vertikale Verschiebung) interpretiert. Ein negativer <offset-x>-Wert platziert den Schatten links vom Element. Ein negativer <offset-y>-Wert platziert den Schatten über dem Element. Wenn nicht angegeben, wird für die fehlende Länge der Wert 0 verwendet. Wenn ein dritter Wert angegeben wird, wird er als <standard-deviation> interpretiert, was dem Wert der Standardabweichung für die Gaussian Blur-Funktion entspricht. Ein größerer <standard-deviation>-Wert erzeugt einen größeren und verschwommeneren Schatten. Negative Werte für <standard-deviation> sind nicht erlaubt.

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
<div>
  drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)
  drop-shadow(-1px -1px red)
</div>

div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -16px red);
}

div:nth-child(5) {
  filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red)
    drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);
}

In Abwesenheit eines <color>-Wertes in der drop-shadow()-Funktion im ersten Kasten verwendet der Schatten den Wert der color-Eigenschaft des Elements (lime). Die zweiten und dritten Schatten zeigen, dass die Werte für Länge und Farbe in beliebiger Reihenfolge angegeben werden können. Der dritte Schatten zeigt den Verwischungseffekt, wenn ein dritter <length>-Wert angegeben wird. Der vierte Schatten verwendet negative Versätze, die den Schatten nach links und oben verschieben. Das fünfte Beispiel zeigt, wie man mehrere Schlagschatten auf einem einzelnen Element verwendet.

Die anderen <filter-function>-Funktionen, die in Werten der filter- und backdrop-filter-Eigenschaften verwendet werden können, sind:

• blur()
• brightness()
• contrast()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• box-shadow-Eigenschaft
• text-shadow-Eigenschaft