Search code examples
jqueryeffectscsslight

CSS "realistic" shadows (light source)

Have a look at the picture below:

skyscrapers

The blue boxes are divs. Now what I am trying to do is to implement a sort of 2.5D functionality:

I would like the grey shadows to be somewhat 3D-ish. At first I was thinking to assign to the box-shadow value the "Y" axis like this:

"box-shadow: -5px -5px 10px" + value.tallness +  "#888"

but the result is the above image.

Any idea on how to make the shadow on one side only, like there was a light source from somewhere?

EXTRA - what about a moving "light source"?

Solution

  • There you go: http://jsfiddle.net/KaCDN/15/

    Drag light source to affect shadows.

    Taller blocks:

    • have larger top,left border
    • drop shadow further
    • they're shadow is blurier