demosthenes.info

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 projects

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 Pacific Ocean, seen from a beach in north-western Australia

Applying Curved Dropshadows To HTML Elements

css / shadows

Estimated reading time: 2 minutes, 25 seconds

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 HTML5 <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 CSS3 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.

(You’ll want to take a note of this technique if you proceed to the next article on creating curved dropshadows with CSS, as it uses much the same idea, just without images.

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 CSS3 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.

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.