CSS bóng "thực tế" (nguồn sáng)

Question

Hãy nhìn vào hình dưới đây:

Các hộp màu xanh là divs. Bây giờ những gì tôi đang cố gắng làm là triển khai một loại chức năng 2.5D:

Tôi muốn các bóng màu xám có phần 3D-ish. Lúc đầu, tôi đã suy nghĩ chỉ định giá trị hộp bóng cho trục "Y" như sau:

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

nhưng kết quả là hình trên.

Bất kỳ ý tưởng nào về cách tạo bóng ở một bên, như có nguồn sáng từ đâu đó?

EXTRA - khoảng di chuyển "nguồn sáng" là gì?

Answer 1

Có bạn đi: http://jsfiddle.net/KaCDN/15/

Kéo nguồn ánh sáng để ảnh hưởng đến bóng tối.

khối Taller:

• có đầu lớn, biên giới trái
• thả bóng thêm
• họ bóng là blurier

Answer 2

Làm thế nào để di chuyển bóng đơn giản hơn một chút:

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

Câu trả lời cập nhật hơn sẽ là sử dụng thư viện như Shine.js (http://bigspaceship.github.io/shine.js/) sẽ xử lý vấn đề chính xác này cho bạn.