E-Mail : info@ardnet.co.uk

CSS Skills – adding shadow to text

01/08/2013

CSS or Cascading Style Sheets are used by website developers to add universal styling and consistency throughout a website.  A CSS can be altered to change the entire look and feel of a website quickly and easily.

In this first lesson on how to use Cascading Style Sheets we are going to look at Text Shadows.  All major web browsers now support this style including Firefox, Google Chrome, Safari, Opera and Internet Explorer 10.

In this example we will be adding a text shadow to the H1 or heading 1 tag of a website, the technique however can be used throughout all text elements that appear on a website.

There are four elements that can be controlled for text shadows.  These are the position of the horizontal shadow, the position of the vertical shadow, the blur distance of the shadow and the colour of the shadow.

The following example demonstrates this heading tag :

h1
{
text-shadow: 2px 2px 3px #404040;
}

heading1

So in the above example the text-shadow command will show a shadow on our red text with a horizontal offset of two pixels, a vertical offset of two pixels, a blur distance of three pixels and a shadow colour using the hexadecimal colour of #404040.

This technique can also be used to apply a drop shadow effect to images.

It is worth noting that Internet Explorer 9 and earlier versions will not display this property.