This is an example of Creating Cross Browser Compatible CSS Text Shadows. We will not use Images, only clear CSS code which work for all browsers.
Each browser uses its methods, so we need to create styles for each browser. Let’s start with default xhtml code which we will use for our example.
1 2 3 4 5 6 7 8 9 10 11 12 13 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example - Crazy Xhtml</title> <style type="text/css" media="all">@import "style.css";</style> <!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]--> </head> <body> <p class="shadow">Cross Browser Compatible CSS Text Shadows</p> </body> </html> |
All versions of Internet Explorer
I have added special code which will load stylesheet file only for Internet Explorer, like this:
1 | <!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]--> |
So, enter to ie.css next CSS style:
1 2 3 4 | .shadow { height:20px; filter: Shadow(Color=#cccccc, Direction=120, Strength=4); } |
Filter is supported only by Internet Explorer. Also for Internet Explorer 8 will add next code too.
1 2 3 4 5 | .shadow:before { margin: 0; padding: 0; content: ''; } |
Firefox , Chrome, Safari, Opera and SeaMonkey
1 2 3 4 5 6 7 8 9 10 | .shadow{ white-space:nowrap; } .shadow:before { display: block; margin: 0 0 -25px 3px; padding: 0; color: #cccccc; content: 'Cross Browser Compatible CSS Text Shadows'; } |
white-space:nowrap; – this is a hack I am using to fix a small bug in Opera and Safari.
By the way, the next code you can use only for Safari and Opera:
1 2 3 | .shadow { text-shadow: #cccccc 2px 2px 2px; } |
This is a method rendering more beauty and real shadows.
Lol, last code is very simple. Why don’t all browsers use it? 
Maybe next generation of Firefox and Internet Explorer will use it too.
You can download an example here.
P.S. Read here about a very easy way how to add shadows for all Browsers using only one xhtml/css code.
nice trick
I’ve tried this is IE8 and it doesn’t work. The text-shadow property works in firefox now and looks great. Why don’t IE BOTHER to implement the css that we want. I guess we can just stop using their browser? ha
All is ok in the IE 8 for me in Windows 7 and Windows XP. Did you use IE CSS hacks? Download our example and test.
Internet Explorer 8 is very good because it is as stable as Opera. I hate the previous versions of IE like IE6 because it hangs frequently. -
Internet Explorer 8 have been my most used browser this year, it is definitely stable and fast loading too. ..