Line25

How to Create a Cool Anaglyphic Text Effect with CSS

Read the full post

Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

View the demo

View the demo

What we’re creating is basically a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in our web designs we’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup, without any repeated markup. Therefore, we don’t want to use anything like this:

Using a span might look OK with CSS styling, but is simply wrong when the word is duplicated

Using a span would be handy to provide us with something to target our CSS to and style up the two words to overlay on top of each other, but when read aloud in the markup, and when viewed without CSS styling it’s simply wrong. With the effect being more presentational or aesthetic than it is part of the content, we need to ensure it’s semantically correct.

The :after class and content property

:after pseudo class inserts content after the targeted element

Here’s where the content property and the :after pseudo element comes into play. The :after pseudo element allows us to insert a snippet of content after the targeted header and adding our extra text in the CSS content property keeps our markup free of any wordage that shouldn’t be there, ensuring that it can’t be seen or read by screenreaders, RSS readers or search bots.

Targeting the title attribute provides a dynamic solution, but isn't ideal

What’s more, we can also use the content property to not only manually write in some text, but also ask it to take the content from a specific attribute such as the title. This provides a dynamic solution that could be implemented in WordPress, but it’s not 100% ideal as it doesn’t stay true to the natural use of the title attribute. The title attribute should provide more information about the element, rather than regurgitate the same text.

Styling it up

Content without any CSS styling

So far we’ve just got two of the same word placed side by side. Let’s add some extra CSS stying to overlay the two and bring in some colour.

CSS code adds colour and overlaps the words

First up, the H1 element is converted to inline and positioned relatively to allow the absolute positioning of the generated text to work. Next up, the font styling is specified as 200px Helvetica with some letter-spacing tweaks to tighten up the example. The text is then coloured using RGBa, which allows the aplha transparency to be set so that when overlayed the underlying colour will show through. The generated text from the content property is also given some styling, specifically the text is positioned absolutely to sit slightly offset from the original at 10px and 5px on each axis, and is switched to red to contrast against the blue.

The final anaglyphic effect

View the demo

<h1>Hello</h1>
h1 {
display: inline;
position: relative;
font: 200px Helvetica, Sans-Serif;
letter-spacing: -5px;
color: rgba(0,0,255,0.5);
}

h1:after {
content: "Hello";
position: absolute; left: 10px; top: 5px;
color: rgba(255,0,0,0.5);
}

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://romirockstar.com Romi

    great tutorial i will use that technique in my future project thanks Chris :-) Cheers

  • http://cssglobe.com Alen

    hey Chris,
    I like the article, great us of rgba. I am not too sure about the h1 display:inline thing though… If we use this in “real life” the headings should remain block level elements :)

    • http://www.designlovr.com DesignLovr

      You could put the h1-tag in an additional div with display:block. Not the perfect solution, but you can overcome your problem.

      Besides that: Great article, I simply love CSS3.

  • http://designinformer.com Design Informer

    Awesome tutorial Chris. I never thought of doing this. I love how you create these cool text effects with just CSS3. Very creative and it definitely shows some forward thinking of practical uses for CSS3.

  • http://fabulous99.com Imran Subhani

    Good technique Chris. Nice tutorial.

  • http://www.antoineguedes.com Antoine Guédès

    That’s brilliant!
    I never tought of doing this like that. Thank your for this tutorial.

  • http://dsgn.pw-software.com Paul Anthony Webb

    It’s things like this that make CSS3 pretty awesome. That’s one less thing to do in Photoshop!

    Thanks for the tutorial Chris.

  • http://deadlinesdesign.deviantart.com/ ivomynttinen

    Interesting. Would work “h1:after:after{} as well or is there any alternative if I want more than one “after-text”?

  • Joe

    yea, I am wondering how to make that “properly dynamic” when embedding it in some kind of web app…

  • http://claricegomes.ca Clarice

    Pretty neat! I will be using this in future projects! Thanks :)

  • http://malayalambloghelp.blogspot.com/ noushad vadakkel

    NICE…..

  • http://maiconweb.com Maicon

    Great effect. So simple and efficient.

  • http://www.hawidu.com/ Brad Czerniak

    Why use the :after pseudo-element at all? This seems like a job for text-shadow

    h1{color:rgba(255,0,0,0.5);font:200px Helvetica, Sans-serif;letter-spacing:-5px;text-shadow:-8px -6px rgba(0,0,255,0.5);}

    • http://www.creativeindividual.co.uk Laura

      You know, that was kinda what I was thinking… But I guess either way will work just as well.

      Very cool idea though and great use of CSS3, thanks Chris!

      • http://garyjones.co.uk Gary

        I firebugged the h3 heading above the last demo, and got just as good a result without having to enter content into the CSS (as the :after solution would have us do):

        color: rgba(255, 0, 0, 0.5); font-size: 120px; text-shadow: -7px -5px 0pt rgba(0, 0, 255, 0.5);

    • http://christianmontoya.net Montoya

      Now _that’s_ using your head :)

  • uma mahesh varma

    nice post ….

  • http://www.seowizzards.co.uk/ Kenneth B

    Great effect. So simple and efficient.

  • http://hayloftdesign.com Matt Barnes

    Nice. I tried something similar to this recently using multiple text-shadows. The advantage of that is that you can “set it and forget it” for something like a blog, rather than having to make a new :after for each piece of text you want to have the effect.

    I’m dying to get a project where this would be appropriate. :)

    http://hayloftdesign.com/3d-text.html

  • http://ampedwebstandards.com Alan S

    So, just for grins… does anyone have 3D glasses laying around that they could test this out on and report back?

    • http://chapolito.com/ Chapolito

      yeah, this does not work as 3D as this is not the technique used to create 3D images, but its a nice effect for plain viewing.

  • http://twitter.com/steffanwilliams Steffan Williams

    An alternative way to achieve a similar look, still using CSS3, would be to use text-shadow. Something like this would garner the same results:

    h1 {
    color:rgba(255, 0, 0, 0.5);
    letter-spacing:-5px;
    font: normal 200px “Helvetica, sans-serif”;
    text-shadow:-10px -5px 0 rgba(0, 0, 255, 0.5);
    }

  • http://www.chrisdasie.com Christopher Da Sie

    This is a great tutorial. I had some clients asking me if something like this is possible on the web. Now I can tell them that it is. Thanks for the great post.

  • http://www.imarkus.net Markus Danek

    *rawr*

    Just love this cool Text Effect – thanks! :-)

  • http://messianicsfortorah.wordpress.com Aaron

    Anaglyphic images should be vertically aligned, i.e., on the same horizontal line, just as human eyes are on the same horizontal line. Otherwise, you will have to tilt your head to see it right.

  • http://www.aftabkhalid.webs.com Aftab Khalid

    CooOooOool Post i will use it my new personal project thanks Chris :)

  • http://www.SohTanaka.com Soh Tanaka

    This is tight :-) Great technique

  • http://bennyk.me Benny

    Wow, that really does look cool. I’ll have to use this is some of my designs at some time. Thank you, Chris.

  • Orb

    Just like Brad and Steffan said, text-shadow is much better. Simple CSS and easier to make template with CMS system.

  • Kartik

    This is awesome…will surely use it..

  • http://www.soula.com/ Katie

    That is really cool, at first it sent my eyes funny but after reading your tutorial I want to try it.

  • http://www.polmoneys.com pol

    thank you for sharing. I like these simple tuts as the Letterpress one, more into good code than design.

  • http://randsco.com stk

    Chris – Love your work, but you should let folks know that the :before & :after pseudo elements aren’t supported in all browsers. Same w/ rgba colors.

    With only a little bit of effort, the effect *could* be identical in IE8 at least. ;)

  • Eric

    Great tut. It works!

  • http://www.glendelmdesign.co.uk/blog/ Matt Lewsley

    Wow this is a great tutorial! Thanks for sharing :)

  • http://travisneilson.com Travis Neilson

    Very interesting tip, I had not even thought about using content: in this way. Thanks Chris.

  • http://nikhilmisal.com Nikhil

    Great tutorial Chris,
    I think this is the second tutorial for the text effect using CSS. First one was Letterpress effect, Right?

  • http://www.duckonwater.co.uk Duncan

    This is the stuff of CSS Ninja’s!

  • http://simiographics.deviantart.com/ Salvador Lopez M.

    Nice tut buddy

  • http://www.creare.co.uk jay design

    Great tutorial. Its good practice for web standards to create text effects like this using CSS and real text on websites instead of using images.

  • Sheena

    Hello,
    Very nice. but not good in IE. in IE its does not show any colour. only show black colour

    • Sheena

      only good in Mozzila browser

  • http://www.thewebtuts.com TheWebTuts

    Tutorial added to thewebtuts.com

  • http://www.techacs.com Long Island Web Design Company

    Great work…but I have a query…
    Is there any CSS property to make font smooth in IE?
    waiting for your reply

  • http://www.bradfordsherrill.com brad sherrill

    effective use of the content property

  • http://www.alfystudio.com Ahmad Alfy

    What I really like is …
    The 2nd hello is created for presentational use… Separated to the CSS. That’s really awesome!
    I’ve always known about the :after pseudo element but never actually used it!
    I am changing my mind atm :)

  • http://webunder.com.au/ Cem Meric

    Nice technique Chris, thanks.

  • http://antie.info Ly Antie

    Thank you, it works. I use to combine color: rgba(153,204,255,0.5); and color: rgba(255,153,204,0.5); for my blog ;)

  • http://www.investresource.info Robin Saha

    I like this topic and now i m looking for investment blog and i create very good one …..http://www.investresource.info

  • http://www.tyssendesign.com.au John Faulds

    Very clever idea Chris, but extra bonus points for those who thought of using text-shadow instead.

  • http://www.empfehlenswert-wien.at wien

    thank you, it’s a great tutorial

  • http://www.ngsoftwaresolutions.com rahul

    But it do not work on IE6.

    • http://www.aravindtemplates.com Aravind

      IE6 does not take ( h1:after ) attribute because, that is old brower.

  • http://www.aravindtemplates.com Aravind

    Smart job…….It’s nice….Thank…..

  • http://keryx.se/ Lars Gunther

    Nice idea, but I’ve got one nit:

    inserting text with CSS :after will not hide it from screen readers, since it will be part of the DOM.

  • http://www.nbatdigital.co.uk web design kent

    Great read, some good points mentioned there

  • http://geeksbynature.dk Christian Sonne

    Repeating content in CSS is if anything even worse than repeating it in the HTML. Now you have to update both HTML and CSS to change the content, which is less than ideal.

    Here is a better approach, that also does away with the background image used for the gradient: http://users.skumleren.net/cers/examples/line25.html

  • Chad

    I am trying with a pair of red/blue 3d glasses from an old box of cereal and I don’t notice any 3d effect :(

  • Matt

    Might have been a good idea to test with 3D glasses BEFORE you wrote a blog post about it!

  • http://www.nova-leap.com Virginia Web Design Company

    Custom web site design solutions for small businesses. Virginia website designers producing custom web sites, shopping cart sites & database driven sites, and everything else web related.

    3D Modeling Virginia

  • http://www.trulium.com/ Trulium

    Great info on 3D effects.It is an important feature for designing websites.

  • myquealer

    I don’t have any glasses handy, but I think to get a 3d effect you need the horizontal offset to change along the text. If the letter spacing is different for the two colors you might get somewhere. Also get rid of the vertical offset, that makes no sense for stereoscopic vision.

  • Poncho

    Man, I’m sorry but that sucks!!!!
    there is no 3d effect at all…

  • Tonći

    Hard coding content into css doesn’t seem right to me.. I think text-shadow would be the right way to do this, it would work no matter the content ;)

  • Eliot

    yes after spending ages figuring out how to do anaglaph im telling you it wont work for several reasons. first off the colours arent the most common anaglaph colours used, blue pink and black are more common.

    also there is no reference to the 3d effect. its hard to see if it is popping off the page on plain white. try putting a textured background behind it

    • Mike hague

      Nice idea but would you ever want to do that effect in a business sense?

  • http://adrusi.com/ adrusi

    this takes it a step further so you dont have to put hello in the title attribute and content

    I didn’t realize you could get the content of an attribute with css!

    h1, h1:after { content: attr(title); }

  • http://www.webtint.net/ Johnny

    This is great, I like how you added all the CSS tips in as well, instead of taking the easy root out, to keep people right :)

  • http://fragged.org/ Dimitar Christoff

    don't mean to sound like the party poop but … don't any of you have business requirement needs to support IE6/7 in your dev work? I'd consider relying on styling such as this to define the look and feel of a site (as opposed to, say, by using images instead) as a UX #fail.