Back in the ancient days of fixed-width web design, adding a drop shadow to an element used to be a matter of exporting an image containing the shadow from Photoshop and placing it as a background image on the element. Job done.
However, if you want some flexibility (as many of us have always wanted) it isn't quite that easy. Sure, if you have a straight drop shadow that can be created with a CSS
box-shadow declaration, it will expand and contract as necessary to fit the width of the element it is applied to. But if the design calls for a slightly more complex shadow you need to do a bit more.
I've had to do this a number of times and thought I'd share a couple of tricks.
Posted in CSS.
Copyright © Roger Johansson