CSS3 Text Shadow

By | March 4, 2011

We have a problem with web and print design in that we live in a 3d world yet the medium that we design on/in is 2d, which gives us a problem. How do you make some that is essentially flat and lifeless, engaging to the viewer, customer or visitor?
You create the illusion of 3d space by either highlighting an area, which makes it look closer to the light source or you darken an area to imitate the shadow that the object has cast. By doing this our brain sees something it is accustomed to seeing and therefore it will immediately look better that a flat image or object.

Now previously to create these drop shadows or highlights we would have to go to photoshop create the image save it as a jpg or png, upload it to the server and link to it in the HTML…but not any more. CSS3 supports both box shadows and text shadows (apparently text shadows were part of the CSS2 spec but no-one supported it) which is great because especially creating a text shadow was just a nightmare do all the steps before then link as a background image in CSS then text-indent the text within the element that need the shadow out to the left…but thats another long winded story that no longer has to be written

So the idea is that you don’t need Photoshop any more to do some simple enhancements to your web page and the CSS3 text shadows is what we’re looking at today.

Text Shadow

As with Photoshop to create a text shadow we need to set the offset and colour the shadow should be. In the case below we are adding to the p tag an offset of 2px right and 2px down with a shadow color of black.

p {
    font-size:36px;
    text-shadow: 2px 2px #000 ;
    color:#fff;
    font-weight:bold;
  }

DEMO1

This looks ok but the shadow is a little sharp so we can add a blur (radius) to the shadow. At first you will nee to play with these settings to get the right look for your text.

p {
    font-size:36px;
    text-shadow: 2px 2px 2px #000 ;
    color:#fff;
    font-weight:bold;
  }

DEMO2

As you can see this softens the shadow making it again more natural.

So how can we use this?

Well you can use this as in the demos above but one technique that I have seen used on the web (although I did go to a New Adventures conference and this technique was derided by one of the speakers) is to use the shadow to imitate a highlight. I know that doesn’t seem to make sense but if you do this your text looks like it’s imprinted or maybe embossed in the page.

p {
    font-size:36px;
    text-shadow: -1px -1px 2px #666 ;
    color:#111;
    font-weight:bold;
  }

DEMO3

Conclusion

This technique is a real time saver but be wary of over using it or using it incorrectly. We have a saying at work. If it looks shit put a shadow on it. It works.. to a point. The design is still shit so maybe you should look at that before using tricks and shortcuts.

5 thoughts on “CSS3 Text Shadow

  1. Pingback: CSS3 drop shadow

  2. Pingback: CSS3 Drop Shadow, 100+ Best Tutorials, Scripts And Examples | Free Website Template Center

  3. Pingback: CSS3 drop shadow

Leave a Reply

Your email address will not be published. Required fields are marked *