It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > 3D > CSS Text-Shadow Anaglyph

Make an awesome 3D anaglyph website using CSS text-shadow

I've always been fascinated with 3D effects, as you might have gathered if you've read my explanation of how stereograms work. So for a while, I've been wondering how to create an anaglyph website using just CSS. For me, the important aspects were:

If you're not familiar with the term anaglyph, it means the 3D effect you get using red/cyan or red/green glasses.

When reading about the CSS text-shadow shadow in Dan Cederholm's excellent book Handcrafted CSS, it occured to me that this could be exactly what I need...

How CSS text-shadow works

First, a caveat. The CSS text-shadow property has not been introduced in Internet Explorer 9, so there's still no support there. It is supported by Firefox 3.5 and Safari 1.3+.

The CSS-text shadow property takes three values: the horizontal offset (positive to the right, negative to the left), the vertical offset (positive below, negative above), the blur radius (an optional addition that specifies how blurred the shadow is), and the color of the shadow. Here's an example:

h1 {
text-shadow: -2px -2px 0 red
}

And this is what it might look like (represented as an image):

Text with a shadow

How rgba colours work

You probably use hexadecimal colours, like #ffffff for white and #000000 for black. There is another way to express colours called rgb which uses a number from 0 to 255 (in decimal) to represent each of red, green and blue. The rgba way of expressing colours goes a step further, and includes a figure for transparency (from 0 to 1). So you could express a 50% transparent red, for example as:

color: rbga (255, 0, 0, 0.5)

rgba enables some nice effects, such as having a semi-transparent background with foreground text that remains 100% opaque. Internet Explorer introduced support for rgba in IE9, and it's supported in Firefox 3+, Safari 3+ and Opera.

For the anaglyph effect, the importance of rgba is that it enables text to overlap semi-transparently.

Creating the anaglyph effect

It doesn't matter whether you're using red/cyan or red/green glasses. You can use the cyan color for the right eye, which is #00ffff or rgb(0,255,255). The left eye is red, #ff0000 or rgb(255,0,0).

Here is how to use text-shadow to make a simple anaglyph effect...

p
{
color:rgba(0,255,255,0.5);
text-shadow: rgba(255,0,0,0.5) 4px 0px 0px;
}

It works like this:

Here's what it looks like (represented as an image for incompatible browsers)

Paragraph of text in anaglyph effect

As they say on the telly, put on your glasses now! You should see that text sink away from the screen.

Creating a 3D anaglyph pop-out effect with CSS

The reason that example seems to sink away from the screen is that the red offset is to the right. If you make it to the left, then the text appears to jump out. To make it jump out, you need to give it a negative offset. The problem with that is that you're more likely to encounter problems with the shadow disappearing out of the left hand side of your content box. Make sure your content box has enough padding to keep the shadow within it. Here's an example, using an offset of -4:

p
{
color:rgba(0,255,255,0.5);
text-shadow: rgba(255,0,0,0.5) -4px 0px 0px;
padding-left:4px;
}

Here's that 3D anaglyph paragraph (represented as an image for incompatible browsers):

Paragraph of text in anaglyph effect

The amazing thing about this effect is that the mouse pointer appears to go behind the text when it rolls over pop-out text like this. Try it!

Adjusting the depth

You can change the distance that the text appears to sink into or pop out of the screen by changing the horizontal offset on the text-shadow. You need to express this offset in pixels: using em would result in the offset changing as the text size increases, which isn't what you want. From my own experiments, I think 24 pixels is the maximum comfortable offset, but it seems to take longer to focus the eyes the greater the offset, and at higher offsets the eyes can be confused about whether the image sinks or pops out. It's particularly confusing if there isn't much white space around the content. I recommend using settings of -8, -4, 4, and 8.

Creating anaglyph hover effects

One natural extension of the idea is to make links appear to pop out of the screen when the mouse hovers over them. This isn't too hard to do: you just change the CSS hover state so that the text-shadow has a smaller value for the horizontal offset, changing it from +4 to -4 for example.

The problem is that because the text shadow moves to the left and the eye perceives the position of the item to be mid-way between the red and cyan images, the text appears to jump to the left. To correct that, you need to add additional padding to the left of the link in its hover state. When I change the shadow's horizontal offset from +4px to -4, adding a padding of 8px corrects that jump.

.poplink, .poplink:visited
{
color:rgba(0,255,255,0.5);
text-shadow: rgba(255,0,0,0.5) 4px 0px 0px;
padding-left:4px;
padding-right:4px;
}

.poplink:hover
{
color:rgba(0,255,255,0.5);
text-shadow: rgba(255,0,0,0.5) -4px 0px 0px;
background:none;
padding-left:8px;
}

To apply the effect to your links, you just need to give them a class of poplink, like this:

<A class="poplink" HREF="index.htm">Home</A>

The effect takes a moment to perceive, so it can slow down the use of links.

If you are using a compatible browser, you can try that effect out using the links below:

If you don't have a compatible browser, here's a screengrab showing the Social Networking book link selected and apparently in front of the others:

Screengrab showing 3D links with a hover effect making one of them pop out of the screen

Bringing it all together

Here's some example page content showing it in action. It only works if you have a compatible browser, which generally means a recent browser version that isn't Internet Explorer...

H1 pops out furthest: -16px

H2 is behind H1 but in front of paragraph: -8px

Paragraph pops out of the screen slightly. This enables you to have an additional layer of depth because the borders, pictures and other page elements that have not been explicitly made 3D will appear to be behind it.

Photo of T'Pau

Paragraph pops out of the screen slightly. This enables you to have an additional layer of depth because the borders, pictures and other page elements that have not been explicitly made 3D will appear to be behind it.

Second headline

Paragraph pops out of the screen slightly. This enables you to have an additional layer of depth because the borders, pictures and other page elements that have not been explicitly made 3D will appear to be behind it.

Concluding comments

Book cover: Web Design in Easy Steps

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Earworm: a novel about the music business

Earworm

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

An entertaining techno-thriller that takes a slice through the music business: from the boardroom to the stage; from the studio to the record fair.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.