Forum Moderators: not2easy

Message Too Old, No Replies

Shadow Effect

Is there a way to produce in CSS

         

Blelisa

7:37 pm on Dec 2, 2003 (gmt 0)

10+ Year Member



Hi:
I'm an intermediate with CSS and would like to know if there is a way to get a shadow effect with CSS instead of having to use a graphic. I have a 2inch wide horizontal stripe that has text on it and I want the stripe to have a shadow effect to give my page a little more depth. Is there a way to achieve this using CSS? Thanks

DrDoc

7:51 pm on Dec 2, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, there are two different ways this can be accomplished:

1) by using a filter -- Filters are IE proprietary, so the effect would be lost in other browsers. But, it looks quite neat.

2) by applying two borders -- If you want a bottom left shadow, simply apply a border to the bottom and left side of the element.

Blelisa

8:08 pm on Dec 2, 2003 (gmt 0)

10+ Year Member



Thank you very much, I knew there as a simple answer!

Lisa

Rincewind

11:38 pm on Dec 2, 2003 (gmt 0)

10+ Year Member



Interestingly, the CSS2 Specification does include properties for creating drop shadows., specifically on text. (See section 16.3.2 Text shadows: the 'text-shadow' property.) However, I've tested in IE6, Opera 6, 7, and Mozilla and none of them seem to support it. Maybe some day. sigh.

killroy

11:51 pm on Dec 2, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



you could also place a div bellow your bar with offset, using absolute positioning and the z-index.

SN

dcrombie

9:48 am on Dec 3, 2003 (gmt 0)



Safari supports text-shadow. Lets you create some snazzy effects - white-on-white text with a shadow outline.
Pity it's invisible on most browsers :(