A recent web design trend is to underscore container elements with a subtle drop shadow, often one that is inset and curved on the corners to provide a "lifted" visual effect: a good example would be the Effector theme for Tumblr by Carlo Franco. There are a number of ways to achieve this particular effect: over the next week I’ll proceed from the most basic to the advanced. All the methods shown will have the same requirements:

  • the effects must be fluid: the container must have the ability to resize, and any shadows should move with it.
  • the effects should use a minimum number of images, to gain maximum adaptability and speed.
  • The effects should be applied via CSS; no alteration to markup will be required.

Our markup will be the same for all examples: a series of simple <article> elements with filler text: 

<article>
	<p>Lorem ipsum dolor sit amet…
</article>
<article>
	<p>Fusce iaculis feugiat ornare…
</article>

The base CSS will also always be the same: 

body {
	background: #ffc;
}
article { 
	box-sizing: border-box;
	padding: 1.6rem;
	width: 70%;
	margin: 2rem auto;
	border: 1px solid #bca;
	border-radius: 3px;
	background: #ffe;
}

I’ve applied a very small curve on the corners of each article with border-radius to soften them, and added a light border to visually separate each article from the background. I’ll be adding to this base CSS with each article in the series.

The methods we will use to create the drop shadows are:

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