Web Design with CSS3 Text Shadows

Hi and welcome to this week’s web design video blog. Today we’re going to talk about Text Shadows in CSS3, and ask if it’s time to start using them.

So before we check out the CSS 3 code, let’s take a look at a few websites that have started to use them.

So we’ve taken some of these examples from a blog post of 30 which we’ve included on our supporting blog post. The first website we are looking at is Matt Pruitt’s website, as you can see on his heading of his name and also other parts of his text, he’s used text shadows quite nicely. Also if we look at madebytinder.com, you can see in  he footer on their website, they used a white drop shadow for their footer text which is quite nice. And we’ve also used text shadows on our homepage if you look at the headings on our tabs, there are very subtle drop shadows on those as well which just slightly lifts them off the background and makes them stand out.

CSS3 attribute for Text Shadows.

So now let’s take a look at the CSS code to display text shadows.

{ text-shadow:2px 2px 2px #333; }

As you can see, the CSS for Text Shadows is short and simple. The three values represent the horizontal offset, the vertical offset and the shadow’s blur. The colour reference also allows you to pick the colour of the shadow being dropped.

If you want to get a good understanding of how these values work, we would recommend checking out this free online tool at westciv.com/tools/shadows/

Here you can experiment with text shadows and even copy and paste the code straight across to your website, once you’ve achieved the style you’re looking for.

Before you start using Text Shadows, it’s important to understand what Internet Browsers support CSS3 Text Shadows. Unlike most of the new CSS3 attributes Text Shadows are supporting fairly well.

Browsers Supporting CSS3 Text Shadows

Text Shadows work with the latest versions of Firefox, Safari, Opera, Google Chrome and even on iPhones. The only operating system currently not supporting them is Internet Explorer.

Despite being supporting well, you need to consider that about 40% of your users will be using Internet Explorer and they wont be able to see your Text Shadows.

Therefore, it is important to ensure that the appearance of your website will not be drastically effected when the shadows don’t appear.

So until Text Shadows are universally supported, we would only recommend using them as a subtle touches to enhance elements like headings and navigation text. That way, if they are viewed in Internet Explorer they wont be missed.

If we go back to our original question, ‘Is it time to start using using CSS3 Text Shadows’, we believe the answer is yes. Almost two thirds of your traffic will be able to see your text shadows, and if they are only used subtly, users on Internet Explorer wont miss them.

Thanks for watching, all of the featured links and resources can be found on our supporting blog post at crearedesign.co.uk/blog/videos.

Related External Links

• Internet Explorer 9 Test Drive
• Text Shadows on CSS3.info
• Free CSS3 Shadow Tool (As featured in the video).
• 30 Live Examples of CSS3 Text Shadow