Shadow

[Zach Elfers]

How do you make a shadow. Like on Microsoft's homepage they have the side banner. When you move your mouse over items with arrows to their right, a new menu pops out. This menu has a shadow behind it. I know that the shadow was done with CSS but can anyone tell me how? Thanks.:)

[Stefan]

There are shadow properties in CSS, but AFAIK no browser implements them.

IE also has a lot of "SFX" proprietary CSS lookalike. It's very likely that it's one of them you are seeing on MS own site.

For documentation of proprietary MS code, ms developer pages is probably the best place.
Obviously the code will only work in MS browsers.

[Rick Bull]

You could do something like this also, not quite right, but close:


<p style="border-right:1px solid black; border-bottom:1px solid black;">
Blah
</p>

[Zach Elfers]

No. I wouldn't like the look of that. The border would go all the way down to the edge and it wouldn't be a gradual shadow.

[Xeenslayer]

I believe that it is done using CSS Filters, either the Shadow or Drop Shadow. I might be wrong, but in case you don't know the code for these...

----------

SHADOW:

<span style="width:100%;filter:shadow(color=#F00, direction=145);color:#008;font-size:2em">Blue text with Red Shadow</span>

----------

DROPSHADOW:

<span style="width:100%;filter:dropshadow(color=#AAA, OffX=2, OffY=2);color:#800;font-size:2em">Red text with Grey DropShadow</span>

----------

Maybe you'd want to try them out.

[Zach Elfers]

Thanks! I'll try that.:)

[Xeenslayer]

:) That's ok.

So does it work?