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.

Parchment

CSS3 Lifted Drop Shadow

css / shadows

Estimated reading time: 1 minute, 46 seconds

The first method of making a recessed drop shadow – providing an HTML element with the appearance that it is lifted from the page – is achieved by using providing the box-shadow property with a value that is largely unknown, or at least overlooked: spread.

First, let’s apply a standard drop shadow, simulating a light from above:

article { box-shadow: 0 10px 9px rgba(0,0,0,0.35); }
Image with a standard box-shadow applied, no spread. Note that the shadow extends to both the left and right edges of the image.

This shadow for article elements has no horizontal displacement, a vertical offset of 10 pixels, and a 9 pixel blur. The problem is that it drops straight down, where we want it to be pulled in from the edges.

There is an optional value, referred to as spread, that can be applied after the blur value. If spread is given a a positive value, it bloats the drop shadow outwards:

article { box-shadow: 0 10px 9px 10px rgba(0,0,0,0.35); }

In the CSS above, the shadow will grow by 10 pixels on all sides. This is useful if we were trying to show the effect of light source over the center of our element, and held very close to it. In our case, we want the opposite effect: a light source above the element, and fairly far away. To achieve that, you can use a negative value to shrink the shadow:

article { box-shadow: 0 10px 9px -10px rgba(0,0,0,0.35); }

The problem is that this value, used in the declaration we have, will essentially cancel the vertical offset, hiding the shadow behind the element. To compensate, drop the shadow down by the original offset amount plus the positive value of the spread (in this case, a total of 17 pixels):

img  { box-shadow: 0 17px 9px -7px rgba(0,0,0,0.35); }

The shadow is now recessed. It is also still straight; in the future, we will be able to use CSS3 filters to bend the shadow, but for right now, we must use different techniques to create curved shadows… which we will explore in subsequent articles.

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.