CSS "realistic" shadows (light source)

Question

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"?

I am working on an example on jsfiddle. Trying to make the moving light source :D — XCS, Aug 19 '12 at 14:30
If you don't mind using a plugin realshadows.js is really good. http://jsfiddle.net/AA69G/ — Jeemusu, Aug 19 '12 at 15:32

XCS · Accepted Answer · 2012-08-20T14:24:15.963

22

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

edited Aug 20 '12 at 14:24

answered Aug 19 '12 at 14:50

XCS

27,244
26
101
151

Updated: taller blocks have a lighter color. – XCS Aug 19 '12 at 14:58
Update2: Taller blocks drop shadow further than shorter blocks. – XCS Aug 19 '12 at 15:03
Hmm, one problem is that the shadow from one div appears on top of another div. Don't know if it's possible to make the shadows be bottom-most, as long as they're created using box-shadow. – XCS Aug 19 '12 at 15:23
Update: Distance between light source and block affects shadow's size. – XCS Aug 19 '12 at 15:58
that code seems so complicated! a great example by the way! I really got no clue where to start modifying it, aha. where do i change shadow color (they seem a bit too white-ish) and "definition"? so that the shadow border is less blurry? – Aug 19 '12 at 16:02
I'll add comments to the code to make it easier to understand. – XCS Aug 19 '12 at 16:03
There you go, added some comments. – XCS Aug 19 '12 at 16:10

adeneo · Answer 2 · 2012-08-19T15:19:42.527

4

How to move the shadow a little simpler:

$(document).on('mousemove', function(e) {
    var elm = $("#test"),
        x = ~Math.round((e.pageX - elm[0].offsetLeft - 150) / 30),
        y = ~Math.round((e.pageY - elm[0].offsetTop - 150) / 30),
        z = 10+Math.abs(x)+Math.abs(y),
        cssVal = x+'px '+y+'px '+z+'px 10px #525252';

    elm.css({'-webkit-box-shadow' : cssVal, 'box-shadow' : cssVal });
});

FIDDLE

edited Aug 19 '12 at 15:19

answered Aug 19 '12 at 15:08

adeneo

312,895
29
395
388

+1 like it! Nice one - I'd also add: if light source is far away: make the shadow more 'dispersive' ;) – Roko C. Buljan Aug 19 '12 at 15:14
@Roko - Sure, why not! Edited my answer? – adeneo Aug 19 '12 at 15:20

score 1 · Answer 3 · answered Dec 17 '17 at 08:07

1

A more up-to-date answer would be to use a library like Shine.js (http://bigspaceship.github.io/shine.js/) which would handle this exact problem for you.

answered Dec 17 '17 at 08:07

Wassim Gr

568
2
8
16

CSS "realistic" shadows (light source)

3 Answers3

Linked