IG Blog

A drop shadow was one of those effects that had to be done by using images. There was no way to accomplish that with just using html or any of the web scripting languages. So you had to create an image using Photoshop or a similar program then place that image in your post or web page. If at any time you had to make a change, then you had to modify the image and go through the process again. However, now that effect is possible with CSS3 and all the latest browsers support it except for IE ! You have to use the “filter” property with IE but it doesn’t work as well as with other browsers.
I also would recommend not using this effect with small text sizes as it makes it hard to read but it works great with larger text sizes such as header tags, although this will work with p tag.
To use this effect all you need to do is to add one line of code to your CSS file using the following syntax:

h2.shadow {
color-value;
text-shadow: x-offset y-offset blur-value color-value;
}

Where:
color is the actual text color
x-offset is the offset value in the horizontal direction
y-offset is the offset in the vertical direction
blur-value is how much blur to use
color-value is the color of the shadow in hexadecimal value.

So in practice the code could look like this:

H2.shadow {color: #coo; text-shadow: 1px 1px 2px #333;}

It is highly recommended not to use large numbers for the offsets and blur as it would exaggerate the effect. You can try various numbers then select what you like best for the effect you are trying to achieve.
In IE9 you will have to add the filter effect to the above line of code like this:

filter: Shadow(Color=gray, Direction=130, Strength=4);

So overall the CSS code for the h2 tag example above would look like this:

h2.shadow {
color: #coo; text-shadow: 1px 1px 2px #333;
filter: Shadow(Color=gray, Direction=130, Strength=4);
}

Have fun.

Be Sociable, Share!

•