While I indicated that the last Curved Dropshadows With Pure CSS article was the final in the “curved shadows” 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:before {
	left: 4%;
}
div.curved-shadow:after {
	right: 4%;
	transform: scaleX(-1);
}

Photograph by Bobby Bong, used with permission.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.