CSS“逼真”阴影（光源）

Question

看看下面的图片：

蓝色框是div。现在我要做的是实现一种2.5D功能：

我希望灰色阴影有点像3D-ish。起初我想把盒子阴影值分配给“Y”轴，如下所示：

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

但结果是上面的图像。

关于如何仅在一侧制作阴影的任何想法，就像有来自某个地方的光源一样？

EXTRA - 移动的“光源”怎么样？

Answer 1

你去：http://jsfiddle.net/KaCDN/15/

拖动光源以影响阴影。

更高的块：

• 有较大的顶部，左边框
• 进一步投下阴影
• 他们的阴影更加模糊

Answer 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

Answer 3

更新的答案是使用像Shine.js（http://bigspaceship.github.io/shine.js/）这样的库来处理这个问题。