CSS "реалистичные" тени (источник света)

Посмотрите на изображение ниже:

skyscrapers

Синие прямоугольники - это div. Теперь я пытаюсь реализовать своего рода 2.5D-функциональность:

Я хотел бы, чтобы серые тени были несколько 3D-иш. Сначала я подумывал присвоить значению box-shadow значение оси "Y" следующим образом:

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

но результатом является приведенное выше изображение.

Любая идея о том, как сделать тень на одной стороне, например, откуда-то был источник света?

EXTRA - как насчет движущегося "источника света"?

Ответы

Ответ 1

Там вы идете: http://jsfiddle.net/KaCDN/15/

Перетащите источник света, чтобы повлиять на тени.

Более высокие блоки:

  • иметь большую верхнюю, левую границу
  • добавить тень дальше
  • они тень более размытая.

Ответ 2

Как перемещать тень немного проще:

$(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

Ответ 3

Более актуальным ответом будет использование библиотеки типа Shine.js(http://bigspaceship.github.io/shine.js/), которая обрабатывала бы это точная проблема для вас.