CSS "realistischer" Schatten (Lichtquelle)

Question

Haben Sie einen Blick auf das Bild unten:

Die blauen Kästen sind divs. Nun, was ich versuche zu tun, ist eine Art von 2.5D Funktionalität zu implementieren:

Ich möchte die grauen Schatten etwas 3D-ish sein. Zuerst dachte ich an die Box-Schattenwert „Y“ Achse wie folgt zuzuordnen:

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

aber das Ergebnis ist das Bild oben.

Irgendeine Idee, wie man den Schatten nur auf einer Seite macht, als ob irgendwo eine Lichtquelle wäre?

EXTRA - was ist mit einem Verschieben "Lichtquelle"?

Answer 1

Dort gehen Sie: http://jsfiddle.net/KaCDN/15/

Drag Lichtquelle Schatten zu beeinflussen.

Taller Blöcke:

• haben größere oben, links Grenze
• Schlagschatten weiter
• sie sind Schatten blurier

Answer 2

Wie ist der Schatten ein wenig einfacher zu bewegen:

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

Eine aktuellere Antwort wäre die Verwendung einer Bibliothek wie Shine.js (http://bigspaceship.github.io/shine.js/), die genau dieses Problem für Sie behandeln würde.