Welcome to WebmasterWorld Guest from 54.167.65.217

Forum Moderators: not2easy

Message Too Old, No Replies

Shadow text

     
4:38 am on Sep 21, 2001 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:14487
votes: 49


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
5:45 am on Sept 21, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2144
votes: 7


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.

6:00 am on Sept 21, 2001 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:14487
votes: 49


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.

6:14 am on Sept 21, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2144
votes: 7


"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.
6:32 am on Sept 21, 2001 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:14487
votes: 49


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
6:45 am on Sept 21, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2144
votes: 7


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.

5:21 pm on Sept 21, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


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)