CSS: drop-shadow(): So gehts


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)

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;}

Dies ist ein Text mit Drop Shadow (Schlagschatten)

    css        css drop-shadow        drop-shadow   

Das könnte dich interessieren!




weitere Beiträge zum Thema CSS


HTML: ✉️ Mailto einfügen – So gehts!


HTML: Placeholder Input Feld


CSS in HTML einbinden – So gehts!


HTML: Video einbinden – So gehts


HTML: Neue Zeile einfügen – So gehts!


Was ist PHP? Einfach erklärt


PHP: „Hello World“ schreiben Tutorial


WordPress Video einbinden: So gehst!


WordPress auf PHP 8 umstellen – So gehts!


HTML: !DOCTYPE – Declaration


Welcher Browser unterstützt HTML5?


HTML: Link erstellen – Hyperlink erstellen


WordPress: Backend aufrufen – So gehts


HTML: Blocksatz erstellen – So gehts!


HTML: Javascript in HTML einbinden


HTML: Wort durchstreichen – So gehts!


HTML: Text einrücken – So gehts!


Lorem Ipsum: Bedeutung & Übersetzung


PHP: trim(): Zeichen von beiden Seiten entfernen


PHP: Explode(): Zeichenkette/String zerlegen


Schreibe einen Kommentar