CSS“真实”阴影（光源）答案

【问题标题】：CSS "realistic" shadows (light source)CSS“真实”阴影（光源）
【发布时间】：2012-08-15 03:55:29
【问题描述】：

请看下图：

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

我希望灰色阴影有点 3D 风格。起初我想像这样将“Y”轴分配给 box-shadow 值：

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

但结果是上图。

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

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

【问题讨论】：

我正在研究 jsfiddle 上的一个示例。尝试制作移动光源：D
如果你不介意使用插件 realshadows.js 真的很好。 jsfiddle.net/AA69G

标签： jquery effects css light

【解决方案1】：

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

拖动光源以影响阴影。

更高的方块：

具有较大的顶部、左侧边框
进一步投影
他们的影子更模糊了

【讨论】：

更新：较高的方块颜色较浅。
更新 2：高块比短块阴影更远。
嗯，一个问题是一个 div 的阴影出现在另一个 div 的顶部。不知道是否可以将阴影设为最底部，只要它们是使用 box-shadow 创建的。
更新：光源和方块之间的距离会影响阴影的大小。
那段代码看起来好复杂！顺便说一句，一个很好的例子！我真的不知道从哪里开始修改它，啊哈。我在哪里更改阴影颜色（它们看起来有点太白了）和“定义”？让阴影边界不那么模糊？

【解决方案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

【讨论】：

+1 喜欢它！不错 - 我还要补充一点：如果光源很远：使阴影更“分散”；）
@Roko - 当然，为什么不呢！编辑了我的答案？

【解决方案3】：

更新的答案是使用像 Shine.js (http://bigspaceship.github.io/shine.js/) 这样的库，它可以为您处理这个确切的问题。

【讨论】：