I’ve looked for a way to create browser-independent text drop shadows for a long time. Your code works beautifully, and I’m EXTREMELY appreciative of it!! As Hal said, you are THE MAN!

I know I could figure it out eventually, but here’s my little annoyance: I’d like for the shadows to go from black to a non-white color, specifically #E0C5A7. Which variables do I have to modify to achieve this?

Thanks!

The funny thing is that I made this just for fun and have never had the opportunity to actually use it in a real project :)

Strange, I’m using Firefox 3.0.10 and it looks correct to me.

On this page the “White Impact font in DIV” phrase shows as white color with a shadow background and on the example page: http://www.stansight.com/DropShadow2.html the read and white colored fonts look correct as well.

this is pretty damn cool if it’ll work in ff

thanks!

Stan..You are The Man!

You’re updated code works, and in all flavours of browsers too!

Thanks!

See if this works for you.

Thanks for your quick reply to my question.

However, when I applied your method to change the shadow colour, the shadow turned Green. If fact, any colour I choose to apply ends in aGreen shadow. The results are the same in IE7 & FF.

Any suggestions?

If you look at the line

var color = parseInt(’444444′,’16′);

The 444444 is the starting grey color of the darkest shadow. To lighten the shadows start with a lighter color gray, like 666666, or 999999, etc..

var color = parseInt(’666666′,’16′);

Whatever the color is, also be sure to change the line that calculates the color increament value from this:

var triple = parseInt(( parseInt(‘ee’,’16′) – parseInt(‘44‘,’16′) ) / max_shadows,’10′);

to this:

var triple = parseInt(( parseInt(‘ee’,’16′) – parseInt(‘66‘,’16′) ) / max_shadows,’10′);

or 99 if you choose to start with 999999, or AA if you choose to start with the color AAAAAA, etc..