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.

Introduction to Curved and Inset Drop Shadows With CSS3

css / shadows

Estimated reading time: 1 minute, 18 seconds

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 HTML5 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:

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.