Unless you happen to be adding a drop shadow to an SVG element, it is hard to pick one approach over the other when all we want to do is just apply a drop shadow to an element. The end result of a shadow defined using either of these approaches is nearly identical: We took a lightning fast look at the two types of drop shadows we can create using the box-shadow property and the drop-shadow filter. Why the Drop Shadow Filter is Better for Animations ![]() Unlike box-shadow, the drop-shadow filter doesn't accept additional values for inset-ness or shadow spread size. The drop-shadow filter takes four values, and they correspond to the same four values our older box-shadow takes as well: New School with Drop Shadow FilterĪ more modern way to define a drop shadow is by using the drop-shadow filter: filter: drop-shadow(0px 0px 50px #333) The box-shadow property supports a few more values, and the MDN documentation goes into more detail if you want to dive into that. These four values correspond to the shadow's: Historically, the way we specified a drop shadow was by using the box-shadow property: box-shadow: 0px 0px 50px #333 How do we animate drop shadows? How do we do this in a way that ensures our animations stay silky smooth and run at 60fps? Do we still need to use the old drop shadow animation approaches that we've had forever? This article will answer these questions and more.īefore we look into animating drop shadows, let's take a moment to talk about how we want to define a drop shadow by looking at our two options. In this article, we are going to focus on the animation part. ![]() It shouldn't at all be a surprise that many of us want to bring them into our web content to both give our elements the illusion of depth even animate them in fun ways to give that depth some life. Ah, the humble drop shadow! It is ever present in a world filled with light sources, solid objects, and things that go bump in the night.
0 Comments
Leave a Reply. |