I'm Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with HTML, CSS and SVG. To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

my books

Pro CSS3 Animation, Apress, 2013

Using SVG with CSS3 and HTML5, O'Reilly, 2017

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

The New Defaults — A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy — an auto-generated #RWD image slider. 3.8K of JS, no JQuery.

css / shadows

css / shadows Dudley Storey

Updated 2013-11-26 comment

Estimated reading time: 2 minutes, 26 seconds

Recently I discussed the drop-shadow filter, which is newly supported in Webkit. Firefox users saw the same effect in the article, even though the browser doesn’t yet support CSS filters.

That’s due to the fact that Firefox supports the older SVG version of the filter, from which the CSS3 version is derived. In this article I’m going to show you how to write the effect for all browsers, so you can achieve the benefits of a true, dynamic drop shadow for all elements.