CSS3 बॉक्स छाया आकार - प्रतिशत इकाइयां?

Question

मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जिसे CSS3 बॉक्स-छाया संपत्ति का उपयोग करने की आवश्यकता है। यह ठीक है, लेकिन मुझे पता चला है कि छाया का आकार आकार मूल वस्तु के प्रतिशत पर सेट नहीं किया जा सकता है।

मैं पूरी तरह से समझता हूं कि बॉक्स-छाया additive नहीं है, इस प्रकार यह संदर्भ के रूप में माता-पिता का आकार नहीं लेता है।

लेकिन इस तथ्य को देखते हुए कि मुझे तरल पदार्थ (न केवल ब्रेक पॉइंट्स पर) स्केलिंग ऑब्जेक्ट्स के साथ पूरी तरह उत्तरदायी साइट की आवश्यकता है, यह एक समस्या है - मैं केवल पूर्ण इकाइयों (एम या पीएक्स) में छाया फैलाने वाली संपत्ति सेट कर सकता हूं।

क्या इसका कोई समाधान है? मैंने कंटेनर के भीतर आंतरिक सामग्री (सामग्री के लिए) का उपयोग करने के बारे में सोचा ("छाया" के लिए - यह धुंधला है), लेकिन यह एक और समस्या पैदा करता है - आंतरिक कंटेनर का ऊर्ध्वाधर केंद्र।

कोई समाधान? कोई jQuery कृपया, बस शुद्ध सीएसएस।

धन्यवाद

Answer 1

आप rem इकाई (रूट उन्हें इकाई) उपयोग करने की कोशिश की है? मेरा मानना ​​है कि आप इसे द्रव रूप से स्केल करने के लिए इसका उपयोग कर सकते हैं।

रिम यूनिट हमेशा रूट एचटीएमएल तत्व से संबंधित है, इसलिए यह तदनुसार स्केल करेगा और आपको आंतरिक कंटेनर या उसके जैसा कुछ भी चिंता करने की ज़रूरत नहीं है। इस बिंदु पर भी इसका व्यापक ब्राउज़र समर्थन है।

मैं इसे अपनी परियोजनाओं पर अधिक उत्तरदायी बनाने के लिए उपयोग करता हूं, लेकिन हमेशा पीएक्स या एम द्वारा परिभाषित पैरामीटर का पालन करता हूं ताकि यह केवल मामले में शानदार तरीके से विफल हो। उदाहरण के लिए: http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

आप चाहते हैं बॉक्स छाया कंटेनर की चौड़ाई के साथ या की ऊंचाई के साथ पैमाने पर करने के:

font-size: 14px; font-size: 1.4rem; 

यहाँ एक महान लेख समझा सब कुछ आप इस इकाई के बारे में पता करने की आवश्यकता है कंटेनर? आप वास्तव में अपनी छाया की ऊंचाई और चौड़ाई निर्दिष्ट नहीं कर सकते हैं, केवल एक प्रसार। तो यदि आपका कंटेनर चौड़ाई में 10% से कम हो जाता है लेकिन ऊंचाई में कम नहीं होता है तो आपकी छाया 10% (यदि यह संभव हो) से कम हो जाएगी, यानी आपकी छाया की ऊंचाई स्केल होगी, भले ही यह संभवतः नहीं होनी चाहिए।

यदि आप ऊंचाई और चौड़ाई के संबंध में वास्तव में सही ढंग से स्केल करने के लिए बॉक्स-छाया चाहते हैं, तो आपको कई छायाएं बनाना होगा - ऊंचाई के लिए एक, चौड़ाई के लिए एक।

हालांकि, आप वास्तविक छाया को केवल छाया के कंटेनर को स्केल करने में सक्षम नहीं होंगे। तो आप अपने मुख्य कंटेनर के अंदर एक कंटेनर बनायेंगे और फिर इसे नकारात्मक मार्जिन दें और बॉक्स-छाया संलग्न करें। हालांकि, आप जल्द ही नोटिस करेंगे कि जब आप कंटेनर को स्केल करते हैं तो आपकी छाया वास्तव में घटने के बजाय बढ़ती है।

कुछ प्रश्नों को स्केल करने और स्केल करने के लिए थोड़ा अधिक लगता है जो मीडिया प्रश्नों या jQuery का उपयोग किये बिना स्केलेबल नहीं है।

हालांकि, अगर आप स्केलेबल सीमाओं, कलंक के बिना यानी बॉक्स छाया के लिए देख रहे हैं: पी, तो आगे नहीं:

http://jsfiddle.net/925r2/3/

<style> 
    * { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     box-sizing: border-box; 
    } 

    .wrapper { 
     position: relative; 
     margin: 100px auto 0; 
     width: 80%;   /* .content width */ 
     height: 400px;  /* .content height */ 
    } 

    .content { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: #fff; /* .content background */ 
    } 

    .shadow { 
     position: absolute; 
     top: -10%;   /* .content shadow top height */ 
     right: -5%;   /* .content shadow right width */ 
     bottom: -10%;  /* .content shadow bottom height */ 
     left: -5%;   /* .content shadow left width */ 
     background: #000; /* .content shadow, unfortuntely no blur effect */ 
    } 
</style> 

<div class="wrapper"> 
    <div class="shadow"></div> 
    <div class="content">This is your content</div> 
</div> 

Answer 3

आप एक इनसेट के बाद कर रहे हैं box-shadow आप व्यवहार की नकल करने के लिए एक रेडियल-ग्रेडियेंट पृष्ठभूमि का उपयोग कर सकते हैं।तो बजाय -

box-shadow: inset 0 0 100% #000; 

आप का प्रयोग करेंगे -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%); 

समर्थन: FF16 +, IE10 +, सफारी 5.1+

मैं पर जब क्रोम संपत्ति का समर्थन करना शुरू किसी भी निश्चित जवाब नहीं मिल सकता है , लेकिन मेरा वर्तमान संस्करण (39.0.2171.65) निश्चित रूप से इसका समर्थन करता है।

ColorZilla यदि आप इस मार्ग पर जाने का फैसला करते हैं तो आवश्यक उपसर्गों के साथ रेडियल (अन्य के बीच) ग्रेडियेंट उत्पन्न करने के लिए एक बहुत ही उपयोगी टूल है।

Answer 4

मुझे पता चला है छाया के प्रसार को आकार पैरेंट ऑब्जेक्ट

सच का प्रतिशत करने के लिए सेट नहीं किया जा सकता है। लेकिन आप मूल ऑब्जेक्ट पर font-size सेट कर सकते हैं, फिर ऑब्जेक्ट आकार को em में परिभाषित करें, और box-shadow आकार को परिभाषित करने के लिए उसी em एस का उपयोग करें।

या, यदि आपका मूल ऑब्जेक्ट विंडो होता है, तो आप viewport units: vw and vh का उपयोग कर सकते हैं।