Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
We all know that we can use box-shadow to add shadows to our HTML elements. eg
.box{
box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}
But did you know that we can achieve the same using drop-shadow filter. You simply have to pass the shadow value in the drop-shadow function
.box{
filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}
Although in this example both box-shadow and drop-shadow does the same thing. But if we were to add box-shadow on a PNG image you will see the shape of box-shadow is rectangular/box.
img{
box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}
While if we add drop-shadow to a PNG, the shape of the shadow will be same as the shape of the visible area of the PNG.
img{
filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}
Make sure you checkout my other articles and YouTube channel
Was it helpful? Support me on Patreon
Discussion (6)
Nicely explained.
Many many Thanks 💖
If I recall correctly, being rectangle/conforming to visible shape also applies to text, and other things with possible transparency, doesn't it?
Yes
You cab use text-shadow instead of box-shadow for texts btw
I didn’t even know drop shadows existed until now
Hope you have a lot of fun with it