Take a look at the following demonstration page in Firefox, Chrome, Safari, Opera, IE9 or IE10:

The circles are created using DOM elements rather than canvas, SVG, Flash or another alternative.

Question: without looking at the source code, how many DOM elements are required?

The answer should be obvious if you read the title of this article. Just one element is used; in this case, it’s a single DIV with the ID ‘element’. It’s actually an invisible circle since its color matches the background.

The other circles are defined in CSS using a little-known feature of the box-shadow property. It permits you to duplicate the shape of any element in any location, at any size, in any color any number of times. The property has six arguments:

1. inset: (optional) if defined, the shadow will appear inside the element
2. horizontal: the x distance from the element
3. vertical: the y distance from the element
4. blur: (optional) the blur radius, i.e. 0 for no blur
5. spread: (optional) the distance the shadow spreads, i.e. 1px extends the shadow 1 pixel in all directions so it’s 2px wider and taller than the parent element
6. color: the shadow color

We can use the horizontal and vertical distances for relative positioning. The spread can be positive or negative to make the shadow larger or smaller than the parent element. Since multiple shadows can be defined, we can duplicate the original shape any number of times, e.g.

#element
{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	border-radius: 50px;
	box-shadow: 120px    0px 0  15px #f00,
				-60px  104px 0   0px #0f0,
				-60px -104px 0 -15px #00f;
}

Remember your shape can have also :before and :after pseudo elements with their own box-shadows.

Next question: is this useful?

That’s more tricky to answer, but it’s an option to consider when developing pages with repeating shapes. It could certainly help reduce page weight.

Obviously, it’s possible to take the technique to extremes and create whole scalable graphics using box-shadows, e.g.

• pixel ninja
• the Mona Lisa

However, this is fairly pointless given that a PNG or SVG is likely to be more efficient and easier to create. But let me know if you use the repeating box-shadow technique for anything interesting…

Get Started with
Ruby on Rails

Github, Twitter and Hulu. All huge. All successful. All Rails.

Learn the web development framework of the moment with our newest book and course.

Learn Rails

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

Tagged as: box-shadow, CSS3, HTML5 Dev Center, HTML5 Tutorials & Articles