Shadow text

[bill]

I was searching around on the net for something a while ago...I forgot what...and stumbled across a site that applied some sort of text-shadow effect on many of its pages. This only shows up in IE6 for me, but I was wondering how they did it...
the-protagonist.net/indexpage.html

[Marshall]

bill,

It's a CSS2 effect they're using a style in the <table>:
style="filter: DropShadow(Color=#505A8D, OffX=1, OffY=1, Positive=1), Alpha(Opacity=80, FinishOpacity=60, Style=1);">

Check [w3.org...]

The following is from the above page:

The example below will set a text shadow to the right and below the element's text. Since no color has been specified, the shadow will have the same color as the element itself, and since no blur radius is specified, the text shadow will not be blurred:
H1 { text-shadow: 0.2em 0.2em }

The next example will place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.

H2 { text-shadow: 3px 3px 5px red }

Have to admit, not sure where they got the coding for their version. Never saw it that way before.

[bill]

This same effect causes all text to be invisible in Netscape 4.75, so it's probably not a trick I'll be playing with soon...

Good call on the style applied on the table...I just didn't look far enough down in the source ;) I didn't think there were any browsers that support the CSS2 text-shadow property yet.

[Marshall]

"I didn't think there were any browsers that support the CSS2 text-shadow property yet."

bill,

That could be why their coding seems strange. I'm going to play with the two variations and see what happens. I have IE 5, 5.5 & 6; Opera 3, 4 & 5, and NN 4 & 6. I'll let you know what works where. But give me a few days. It's propably safe to assume that it doesn't work in Opera 3 or NN4, but I'll test them anyway.

[bill]

Thanks Marshall! That would be interesting. As a very limited test I tried that site out on NN 4.75 which didn't work at all (text invisible), IE 4 which worked, Opera 5.12 didn't work, and Mozilla 0.9.3 didn't work

[Marshall]

bill,

Call me impatient, or curious, but since I was doing some work on my web anyway, I tested it.

The text-shadow didn't work in any browser. Their coding didn't work in Opera or Netscape and, as you mentioned, everything was invisible. Their coding did work in all of IE. HOWEVER, it ONLY worked when inserted in the <table>. Not in <p> or <span>. I didn't try <td>. And even then, it shadowed everything, images too.

I'm sure someone will correct me if I'm wrong, and this is a guess, but it strikes me that they're not really creating a shadow, but a mirror of the <table> content at a lower layer, but not as a true layer. Does that make sense? Regardless, as you said, it would be a long time before I play with it. If I need a shadow, I'll make an image. That!, I am very good at.

[mivox]

Fascinating... I really can't wait until full CSS support becomes standard.

Until then though, I have to side with Marshall for 'advanced' visual effects: GIFs and JPEGs are universally supported. ;)

(Hopefully, PNG will be fully supported soon as well... on my wish list right alongside CSS)