CSS“现实”阴影（光源） [英] CSS "realistic" shadows (light source)

问题描述

请看下面的图片：

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

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

我想灰色阴影是一些3D-ish。起初我想像这样分配盒子阴影值的Y轴：

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"

但结果是上述

有关如何只在一侧产生阴影的想法，例如某处有光源？

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

EXTRA - 如何移动光源？

EXTRA - what about a moving "light source"?

推荐答案

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

拖动光源影响阴影。

高块：

这篇关于CSS“现实”阴影（光源）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！