Post Archive
› January 20, 2004
CSS text shadow
In case:
- you want to achieve a simple MOSe (so not Safari-only!) drop shadow effect on your webpage;
- you don't want to insert any extra content or tags;
- you want to do this with plain XHTML and CSS,
then this page might offer a solution. Works in Safari 1.1, Mozilla 1.+ and Opera 7.2 and gently serves IE a lo-fi solution, i.e. no drop shadows.
Note: a Google search done after I wrote the CSS mentioned above turned up this page, which describes a similar technique, but uses generated content :before the respective div.
Comments
1. January 21, 2004 03:28 AM
2. January 21, 2004 05:49 PM
Eric TF Bat Posted…
Lon - I was going to say that!
The advantage of the IE method is you don't need to repeat the contents inside the CSS - which is a ridiculous requirement of the version given in the link. This isn't much better than requiring a little JavaScript or PHP program to dynamically generate a bitmap of the appropriate text, really.
Final score:
IE: 9 out of 10 (minus 1 for the buggy implementation of filters);
everyone else: 3 (for trying)
WebGraphics: 9 out of 10 (minus 1 for the crippled HTML filters on this comment form)
3. January 21, 2004 11:27 PM
4. January 24, 2004 03:58 PM
5. January 25, 2004 03:48 PM
6. January 29, 2004 08:27 PM
me Posted…
Please put your comments in paragraph tags, no auto-line-breaking anymore.
7. January 31, 2004 11:05 AM
8. April 8, 2004 07:37 AM
obiwan Posted…
People it is really easy to and it works in all current browsers! first make a css style for both divs: #divlight,#divdark{ font-family:verdana; font-size:12pt; position:absolute; background-color:transparent; } #divLight{ z-index:1; color:white; left:10px; Top:10px; } #divDark{ z-index:0; color:black; left:11px; top:11px; } Now al you do in html: Hello world Hello world And her ya go :)
9. April 8, 2004 07:43 AM
obiwan Posted…
Hmm.. lets try again, (never heard of virtual wrap i quess)
one more time:
People it is really easy to and it works in all current browsers!
first make a css style:
#divlight,#divdark{
font-family:verdana;
font-size:12pt;
position:absolute;
background-color:transparent;
} #divLight{
z-index:1;
color:white;
left:10px;
Top:10px;
} #divDark{
z-index:0;
color:black;
left:11px;
top:11px;
}
Now al you do in html is make to div tags:
[div id="divlight"]Hello world[/div]
[div id="divshadow"]> Hello world [/div]
And her ya go :)
10. April 8, 2004 01:23 PM
11. May 25, 2004 02:41 PM
bas Posted…
@Obiwan >And her ya go :) ANd here you go, must be the worst css script i ever seen. Firsto f all [div] tags should be it confusses people. Second, it does NOT work in Mozilla.12. May 25, 2004 02:42 PM
Bas Posted…
@Obiwan Sorry for the [div] complaint, this is the fault of the webpage. rest stands.13. October 13, 2004 05:15 AM
bsam Posted…
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true') doesn't work. Can anybody help?
14. April 12, 2005 10:03 PM
regan Posted…
try this one >>> filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=3);15. January 29, 2006 01:54 PM
Manko Posted…
Since it is now 2006 and long after this article was originally written, you can skip all of the CSS contortions and just use a variation of:
text-shadow:2px 2px 1px #ccc;
That will give you a #ccc colored shadow that has a 1 pixel blur and is located 2 pixels to the right and down from whatever it is attached to. No it doesn't work in older versions of IE but... well, who cares?
They still see the text to which the text-shadow was attached, the shadow just isn't there (if they want the visual flourishes they can go download a modern browser).
16. April 12, 2006 06:17 AM
Posted…
Please put your comments in paragraph tags, no auto-line-breaking anymore.
Lon Posted…
and if you want to do it in IE you can use filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')