[CSS] drop shadow

[justas]

1) CODE TITLE:
CSS drop shadow

2) AUTHOR NAME/NOTES:
Justas Vinevicius

3) DESCRIPTION:
Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images).

4) URL TO CODE:
CSS drop shadow

[blm126]

http://www.dynamicdrive.com/style/cs...-drop-shadows/

[chovy]

1) CODE TITLE:
CSS drop shadow

2) AUTHOR NAME/NOTES:
Justas Vinevicius

3) DESCRIPTION:
Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images).

4) URL TO CODE:
CSS drop shadow

very cool.

[justas]

http://www.dynamicdrive.com/style/cs...-drop-shadows/

If you will study these 2 examples you will see that they differ a bit.

[chovy]

the first one looks better in my opinion. But is it really worth the extra markup to achieve this? Why *not* just use a bg image?

[justas]

the first one looks better in my opinion. But is it really worth the extra markup to achieve this? Why *not* just use a bg image?

There can be many opinions about this, but i think that 1 request (more markup no image) to the server is better that 2 (less markup 1 image).

[jscheuer1]

I like it, works in Opera and, that's saying something. However, in Opera, if these objects also were able to move and/or resize dynamically via script, there would most likely be unwanted trail effects. This is just a fact of life in Opera and nothing to do with your css code.

[chovy]

There can be many opinions about this, but i think that 1 request (more markup no image) to the server is better that 2 (less markup 1 image).

on a high-traffic site i would think not. and the point of using css is to make redesigns easier...in this case, you're putting design *back* into the markup, which should certainly be avoided.

[justas]

Well everyone can make their choice, what to use. I just show what you can do with css, thats it.

[grizzy]

Justas,

I noticed that your drop shadow (which looks good btw) does not work properly on IE7. For some reason IE7 insists on dropping the third shadow box below the image...is this an IE7 bug or is there some kind of IE7 specific addition to make to the CSS? I played around with it for at least an hour and couldn't figure it out....

thx, grizzy