सीएसएस "वास्तविक" छाया (प्रकाश स्रोत)

Question

नीचे चित्र पर एक नजर डालें। अब मैं जो करने की कोशिश कर रहा हूं वह 2.5 डी कार्यक्षमता को लागू करना है:

मुझे भूरे रंग की छाया कुछ हद तक 3 डी-आईएसएच चाहिए। पहले तो मैं इस तरह बॉक्स छाया मूल्य के लिए "Y" अक्ष आवंटित करने के लिए सोच रहा था:

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

लेकिन परिणाम ऊपर छवि है।

किसी भी तरफ छाया बनाने के बारे में कोई विचार, जैसे कहीं से एक प्रकाश स्रोत था?

अतिरिक्त - "प्रकाश स्रोत" को स्थानांतरित करने के बारे में क्या?

Answer 1

ये लीजिए: छाया को प्रभावित करने के http://jsfiddle.net/KaCDN/15/

खींचें प्रकाश स्रोत।

लम्बे ब्लॉक:

• बड़ा शीर्ष है, छोड़ दिया सीमा
• ड्रॉप छाया आगे
• वे छाया है blurier

Answer 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

Answer 3

एक अधिक अद्यतित उत्तर Shine.js (http://bigspaceship.github.io/shine.js/) जैसी लाइब्रेरी का उपयोग करना होगा जो आपके लिए यह सटीक समस्या को संभालेगा।