In a previous article I stepped through the process of creating a curved dropshadow image in PhotoShop. Now it’s time to take the 32-bit PNG we exported at the end of that process and apply it to your elements, so you can give the visual impression of a "lifted" dropshadow on a curved background.

I could apply the CSS that follows to any HTML container element. Here, I’ll use an<article> element:

<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

What’s interesting is what the CSS is not. You might assume that we would apply the PNG as a background-image, possibly via multiple backgrounds. However, if you tried to do so, you’ll discover that you can only apply a background-image within the extent of the element that it is applied to. Instead, we’ll apply the shadow image using the pseudo-elements ::before and ::after.

First, let’s define our base CSS:

article {
	width: 768px;
	margin: 2em auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 2em;
	background: #ffc;
	position: relative;
}

We’re going to position these shadows absolutely. So we use the old trick of defining the <article> elements as being position:relative so that the absolutely positioned shadows will be positioned relative to each article.

For the first shadow we’ll use our 32-bit PNG image from the previous lesson:

article:before {
	content: url('shadow.png');
	position: absolute; z-index: -2;
	bottom: -15px; left: 8px;
}

You will need to alter the values for bottom and left depending on the size and shape of your particular shadow image: in my case, the shadow is inset 8 pixels from the left and 15 pixels below the bottom of the article element it is attached to.

Our :after pseudo-element will have many of the same properties, so we’ll group the selectors together:

article:before, article:after {
	content: url('shadow.png');
	position: absolute;
	z-index: -2; bottom: -15px;
}

There’s only two things that are different about the right-hand shadow. First, it will be positioned from the right, not the left, and second, it will be reversed (flipped horizontally). Rather than making and loading a separate shadow image, we’ll use the CSS method for flipping images:

article:left { left: 3%;  }
article:after {
	transform: scaleX(-1);
	right: 3%;
}

That’s it! You’ll now find that every article has a subtle, curved, lifted drop shadow underneath it. Neat, huh? Unlike other solutions you might find, it’s also fluid: if you decided to specify the width of your articles in percentages, the shadows would move appropriately as the articles became thinner and wider due to browser window or device resizing.

Photograph provided by Stephen Edgar, licensed under Creative Commons.

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