The box-shadow property works in a similar way to text-shadow, except you can use it to apply shadows to whole areas, such as images, side panels or feature-boxes. Previously, a web developer would have to resort to using carefully edited background images for drop-shadows, and when it came to putting shadows on resizeable elements such as sidepanels, it could result in a whole lot of extra markup, (such as the use of multiple nested DIV tags), not to mention the extra bandwidth used by the image files. Now we can even cast shadows onto whatever arbitrary background falls beneath drop-down navigation menus, and other dynamic elements, which would previously have been just about impossible.
Continue reading »