H1 pops out furthest: -16px H2 is behind H1 but in front of paragraph: -8px When I change the shadow's horizontal offset from +4px to -4, adding a padding of 8px corrects that jump. To correct that, you need to add additional padding to the left of the link in its hover state. 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. 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. One natural extension of the idea is to make links appear to pop out of the screen when the mouse hovers over them.
I recommend using settings of -8, -4, 4, and 8. It's particularly confusing if there isn't much white space around the content. 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. 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. 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. 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. Here's that 3D anaglyph paragraph (represented as an image for incompatible browsers):
Here's an example, using an offset of -4: Make sure your content box has enough padding to keep the shadow within it. 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. To make it jump out, you need to give it a negative offset. If you make it to the left, then the text appears to jump out. The reason that example seems to sink away from the screen is that the red offset is to the right. Here's what it looks like (represented as an image for incompatible browsers)Īs they say on the telly, put on your glasses now! You should see that text sink away from the screen.Ĭreating a 3D anaglyph pop-out effect with CSS 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.It sets the normal color of the paragraph text to be cyan at 50% transparency.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. 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. If you're not familiar with the term anaglyph, it means the 3D effect you get using red/cyan or red/green glasses. That effectively means there should be no duplication of text in the HTML. The web page should still make sense when a different style sheet is applied or when CSS is unavailable.It should require no interference with the HTML, so that it can be easily applied to the website.
More recently, my book Cool Scratch Projects in Easy Steps included a pair of 3D anaglyph glasses and three projects you can create using them.įor a while, I've been wondering how to create an anaglyph website using just CSS. I've always been fascinated with 3D effects, as you might have gathered if you've read my explanation of how stereograms work. Make an awesome 3D anaglyph website using CSS text-shadow