Adding drop shadows is now possible with CSS3 but is it worth it? There are only a few web browsers that currently support a css styled drop shadow are Firefox, Opera and Safari. (Don’t expect the old IE versions to work with this because they don’t work with anything.) This means that the page may look better off without using dom style text and going with an image.
The code is simple and looks like this:
text-shadow: 2px 2px 3px #666666;
Yes, this is all that is required to add a drop shadow but it may not be worth it depending on what browser the user is currently on. For the following example I used this bit of code.
<style>
.textdrop {
font: 80px Verdana, Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 3px #666666;
}
–>
</style><div class=”textdrop”>This is a test</div>
If you are unable to view the above text in your browser I have included a print screen of what it looks like in Firefox.
The text is slightly different because it has been placed in a blog with a different css style on it. To see the drops shadow as it truly is you can use the image or click here to see it in action.