– Today I Learned …

Drop-Shadow

Um Schatten an Website-Elementen zu erzeugen gab es ursprünglich die beiden Varianten:

• text-shadow
• box-shadow

Textschatten legt Schatten um Zeichen, während Boxschatten sich um Objekte legt

bei Bildern hingegen versagt der konturenfolgende Textschatten (Bsp. 1)
ebenso wie der Außenschatten (Bsp. 2) –
dafür eignet sich der Filter drop-shadow (Bsp. 3) und ist sogar animierbar (Bsp. 4)

.pulse-shadow {
	filter: drop-shadow(0 0 5px hsla(0,0%,0%,0.9));
	animation: pulseShadow 5s infinite ease-in-out;
}

@keyframes pulseShadow {
	0% {filter: drop-shadow(0 0 5px hsla(0,0%,0%,0.9));	}
	50% {filter: drop-shadow(0 0 20px hsla(0,0%,0%,0.4));}
	100% {filter: drop-shadow(0 0 5px hsla(0,0%,0%,0.9));}
}