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:

• It should require no interference with the HTML, so that it can be easily applied to the website.
• The web page should still make sense when a different style sheet is applied or when CSS is unavailable. That effectively means there should be no duplication of text in the HTML.

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

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:

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:

• It sets the normal color of the paragraph text to be cyan at 50% transparency
• It creates a shadow on that text in red at 50% transparency, which is offset by 4 pixels to the right and at the same level vertically.

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

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

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:

• Book: Web Design in Easy Steps
• Book: Microsoft Office for the Older and Wiser
• Book: Social Networking for the Older and Wiser
• If Goya had learned Javascript
• 3D Text Maker
• Designing for the Opera web browser

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:

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

Concluding comments

• Take care with the colours you use on the rest of your web page - some can be uncomfortable to look at through 3D glasses.
• Don't realistically expect people to read web pages using red/cyan or red/green glasses. It's a neat effect, but it quickly tires the eyes.
• Consider using anaglyph images for spot effects on your web pages. You can use these to create lines that appear to come out of or go into the screen, rather than being on a single plane. That would be a great way to complete the effect.
• If you sink the text into the background, when the user selects it with the mouse, it seems to pop out of the screen. That looks great.
• If you found this tutorial helpful, links are always appreciated, or you could consider buying one of my books for yourself or a friend. My book Web Design in Easy Steps includes an introduction to HTML, CSS and Javascript and also covers key ideas in website layout, usability and promotion.