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

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

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

my projects

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. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Way Of Light

Curved Dropshadows With Pure CSS, Method 2

css / shadows

Estimated reading time: 1 minute, 21 seconds

While I indicated that the last Curved Dropshadows With Pure CSS article was the final in the “” series three weeks ago, I realized today that there was one other method for creating the impression of curved shadows under elements.

While this technique uses much the same idea as the previous two examples – relatively positioned pseudo-elements aligned to an absolutely positioned HTML element – it generates the “shadows” via a different method: rather than using the box-shadow property, it creates the appearance of a curved shadow by using a radial gradient under a photograph.

A brief explanation: the box for each pseudo-element in this example is 170 pixels wide by 18 pixels tall. The radial gradient starts from the bottom right corner of each box (100% from the left, and 100% from the top) as completely transparent (represented by an rgba value), a transparency that continues all the way to 66% of the distance to the opposite corner, where it starts to become visible. The box is pushed down and under the div (we can't place ::before and ::after on images, as they are replaced elements). The right shadow is simply the same style declaration flipped horizontally using a CSS3 scale transformation.

The entire CSS, sans vendor prefixes:

div.curved-shadow { position: relative; }
div.curved-shadow:before, div.curved-shadow:after { content: " ";
width: 170px; height: 18px; position: absolute; bottom: -14px;
background-image: radial-gradient(100% 100%, ellipse farthest-corner,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 66%, rgba(0, 0, 0, 0.53) 100%);
z-index: -2;  }
div.curved-shadow:beforer { left: 4%; }
div.curved-shadow:after { right: 4%; transform: scaleX(-1); }

Photograph by Bobby Bong, used with permission.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.