drop-shadow() erstellt einen Schatten Effekt . Du kannst es auch als einen Schlagschatten verstehen. Sieht ziemlich cool aus und man kann tolle Effekte damit erzielen.

Beispiel: drop-shadow()

Die Funktion besteht aus dem offset-x, offset-y, blur-radius, und schließlich der Farbe. Die verschiedenen Offset Werte werden in px angegeben.

filter:drop-shadow(offset-x offset-y blur-radius color)

filter:drop-shadow(16px 16px 10px red)

<h2 style="filter: drop-shadow(16px 16px 10px red);color:red">Dies ist ein Text mit Drop Shadow (Schlagschatten)</h2>

Ergebnis

So könnte eine Schrift mit diesem Schlagschatten aussehen

Dies ist ein Text mit Drop Shadow (Schlagschatten)

offset-x, offset-y

Zwei -Werte, die den Schattenversatz bestimmen. Der offset-x gibt den horizontalen Abstand an, wobei negative Werte den Schatten links vom Element platzieren. offset-y gibt den vertikalen Abstand an, wobei negative Werte den Schatten über dem Element platzieren.

Wenn beide Werte 0 sind, wird der Schatten direkt hinter dem Element platziert.

blur-radius

Der blur-radius ist der Unschärferadius des Schattens. Je größer dieser Wert ist, desto unschärfer ist der Schatten. Wenn kein Wert gesetzt ist ist der Standartwert 0. Der Wert 0 würde zu einer scharfen unverschwommenen Kante führen. Negativer Werte gibt es beim blur-radius nicht

#color

Der letzte wert der Funktion ist die Farbe du kannst hier auch den Farbcode in Hexadezimaler Schreibweise einfügen.

Schlagschatten mit CSS box-shadow()

Es gibt verschiedene Arten von Schatten, die du mit CSS erstellen kannst. box-shadow() ist eine weitere Möglichkeit einen Schlagschatten zu erstellen. Der einzige Unterschied ist, das es bei dieser Funktion keinen blur-radius gibt.

Bei diesem CSS Schatten gibt es nur eine horizontale eine vertikale Länge und schließlich die Farbe deines Schlagschattens

Beispiel: box-shadow()

 #beispiel1{
 border: 1px solid;
 padding: 10px;
 box-shadow: 5px 10px;}

<h2 style=" border: 1px solid; padding: 10px; box-shadow: 5px 10px;">Dies ist ein Text mit Drop Shadow (Schlagschatten)</h2>

Dies ist ein Text mit Drop Shadow (Schlagschatten)

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Kennst du schon diese Memes?

Smiley Bedeutung