Blog Styling Tip: Text Shadows

Description:

Text-shadow is a simple styling element to create cool text effects that look like images generated by software like Photoshop.  The result is interesting text that can spice up your post and be read by the Search Engines.  In addition you avoid slow loading graphics. Basically the shadow is a copy of the text,blurred and moved slightly.

How to:

You can code to your html  (inline) or use in your CSS stylesheet (template).

The shadow color needs to stand out from your blog's background and blend or contrast properly with your default text color.

The format of the style attribute is:

text-shadow: 3px 5px 3px #a1cfe5;

Where the first value is for the horizontal length of the shadow, the second is for the vertical height. Positive values place the shadow to the right (positive number) and bottom of the text, while negative numbers place it on the left or top of the text.

The third value indicates the 'blur radius'--- the number of pixels to stretch the text for the blurred effect. The fourth and last value is the color number.

This example shows a blue shadow below the text of an H3 heading. You can put the code in a div or in a paragraph tag:

<div style="text-shadow:3px 5px 3px #a1cfe5;"><h3 style="color: #1b55b6;">Sample Blue Chisel</h3></div>

This is the resulting text (not an image).

If by some chance you do not see the shadow text then your browser is not supported. Nearly all recent versions of browsers work  (e.g.Firefox 3.1Beta but not prior versions; Opera 9.5, Google Chrome 2.0. However,  IE 7/8 does not support this (what else is new?).  If you don't have firefox beta, you can use the addon to see this type of text effect until firefox 3.1 is ready. Here's how it should look --- this is an image:

Other examples:

1. Red Shadow Above text

   <p style="text-shadow : -1px -2px 5px red;">This text has a blurred red shadow.</p>

   This text has a blurred red shadow.

2. Larger font size
   This one uses font size to create larger text, where the shadow effects can be more dramatic.

   <p style="color: #000000; background: #ffffff; font-size: 28px; text-shadow : 2px 2px 3px #000000;">Very Smooth Sample</p>

   Very Smooth Sample

Try using it instead of graphics for banners and attention grabbing text links in your sidebar!

Note: Tutorial code may contain a green arrow to mark line continuation. Hover the mouse over any line. Small toolbar pops up. Click second icon to copy the code to clipboard. Then paste into your  html editor. Use third icon to print.

Let us know if you find other uses for this technique!