Sombras “realistas” CSS (fuente de luz)

Echa un vistazo a la imagen de abajo:

rascacielos

Las cajas azules son divs. Ahora, lo que estoy tratando de hacer es implementar una especie de funcionalidad 2.5D:

Me gustaría que las sombras grises sean algo 3D-ish. Al principio, estaba pensando en asignar al valor de sombra de cuadro el eje “Y” de esta manera:

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

Pero el resultado es la imagen de arriba.

¿Alguna idea sobre cómo hacer la sombra en un solo lado, como si hubiera una fuente de luz de algún lugar?

EXTRA – ¿Qué pasa con una “fuente de luz” en movimiento ?

Ahí tienes: http://jsfiddle.net/KaCDN/15/

Arrastra la fuente de luz para afectar las sombras.

Bloques más altos:

  • tienen borde superior izquierdo superior
  • sombra adicional
  • son sombras es borrosa

Cómo mover la sombra un poco más simple:

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

Una respuesta más actualizada sería usar una biblioteca como Shine.js ( http://bigspaceship.github.io/shine.js/ ) que manejaría este problema exacto para usted.