CSS for Heading Text Drop ShadowsOctober

Did you know that you can use CSS to create text shadows? Well I think it’s a pretty cool thing that CSS allows you to do if you just want to give your page headings a subtle lift instead of just a boring flat text heading. So why not just use a graphic to give the same effect? Well it’s pretty common knowledge that text heading are better for search engines and can easily be tagged with the appropriate html so using CSS to create the subtle shadow is a win-win for you and your site users.The way it works is by applying the property text-shadow to your selector ie: h1. Here is a you could write your CSS.h1 { color: black;text-shadow: #ccc 2px 0.2em 3px;}The values in the text shadow property example above are #ccc which defines the colour of the shadow, 2px determines how deep the depth of shadow, 0.2em defines how far right (or left using negative values) the shadow will be, and the 3px defines the amount of blur to be applied.Here is a sample of how text-shadow looks providing your browser is capable of rendering the text-shadow property. Firefox, Opera & IE6 & 7 all don’t render the text-shadow property, however Safari for Windows & Mac work great.This would produce a nice drop shadow on your text heading just giving to give you the effect that your headings have a little depth to them. The only downside to the text-shadow property is that it doesn’t work on browsers that aren’t CSS2 compatible but we should be seeing more of this kind of thing as browsers improve and add more CSS functionality.