CSS3 के। छाया के साथ काम करें। भाग 1

ऐसा हुआ (और मैं आपसे इसे एक अच्छा संयोग पर विचार करने के लिए कहता हूं), आज दिलचस्प प्रभाव पैदा करने के लिए CSS3 छाया के व्यावहारिक उपयोग के बारे में हैबर पर एक विषय प्रकाशित किया गया था, और हम, बदले में, इस रचनात्मकता के लिए मूल बातें के बारे में एक विषय तैयार किया।

हम यह समझने की कोशिश करेंगे कि नए CSS3 मॉड्यूल में छाया कैसे काम करते हैं। व्यावहारिक दृष्टिकोण से, हम दो नियमों पर विचार करेंगे: बॉक्स-शैडो और टेक्स्ट-शैडो , क्रमशः सीएसएस 3 पृष्ठभूमि और बॉर्डर और सीएसएस 3 टेक्स्ट मॉड्यूल में परिभाषित किए गए हैं।

दोनों नियम समान तरीके से काम करते हैं (विनिर्देश में संबंधित संदर्भ तक), इसलिए यह उन्हें एक साथ विचार करने के लिए समझ में आता है। इसके साथ ही, कुछ अंतर भी हैं, जिन्हें कहा नहीं जा सकता है।

पहला भाग बॉक्स-छाया के साथ काम करने के लिए समर्पित है, दूसरे में हम पाठ के लिए छाया के माध्यम से जाएंगे।

बॉक्स-छाया

शिफ्ट और रंग

सबसे सरल संस्करण में, छाया को निर्दिष्ट करने के लिए, यह दो मापदंडों को निर्दिष्ट करने के लिए पर्याप्त है जो क्रमशः छाया के क्षैतिज और ऊर्ध्वाधर बदलावों को निर्दिष्ट करते हैं (1.1):

box-shadow: 3px 3px; 

पॉजिटिव शिफ्ट वैल्यू शैडो को दाएं और नीचे शिफ्ट करते हैं, लेफ्ट और ऊपर नेगेटिव शिफ्ट।

डिफ़ॉल्ट रूप से, यदि छाया रंग सेट नहीं है, तो अधिकांश ब्राउज़रों में (वेबकिट-आधारित को छोड़कर सब कुछ) इसे वर्तमान संदर्भ (1.2) में पाठ रंग (रंग) से लिया गया है, हालांकि, ऐसा लगता है कि इस बिंदु पर विनिर्देश द्वारा चर्चा नहीं की गई है:

 box-shadow: 3px 3px; color:blue; 

छाया रंग सेट करने के लिए, बस इसे अतिरिक्त पैरामीटर (1.3) के साथ निर्दिष्ट करें:

 box-shadow: 3px 3px darkgreen; 

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

गिरावट

तीसरा "रैखिक" पैरामीटर जो छाया का वर्णन करते समय सेट किया जा सकता है, धब्बा त्रिज्या है, एक सकारात्मक मान जो इंगित करता है कि अंतरिक्ष में छाया को धुंधला करने की कितनी आवश्यकता है (2.1-2.3):

 box-shadow:3px 3px 3px darkgrey; 

डिफ़ॉल्ट रूप से, धुंधला त्रिज्या 0 है, इस मामले में छाया तेज है।
छाया की विभिन्न पारियों के संयोजन में, आप अलग-अलग प्रभाव प्राप्त कर सकते हैं, उदाहरण के लिए, (2.3) छाया की दोनों पारियाँ शून्य के बराबर हैं, लेकिन धुंधला होने के कारण, छाया अलग-अलग पक्षों से प्रकट होती है:

 box-shadow:0 0 9px black; 

धुंधला एल्गोरिथ्म को विनिर्देश द्वारा वर्णित नहीं किया गया है, सिवाय इसके कि यह इंगित करने के लिए कि छाया सीमा के दोनों ओर आधे त्रिज्या के साथ गाऊसी धब्बा के समान प्रभाव होना चाहिए: (2.4)

विस्तार

एक और दिलचस्प पैरामीटर छाया (स्प्रे) का विस्तार या प्रसार है, जो आपको इसके आकार को बढ़ाने या कम करने की अनुमति देता है (डिफ़ॉल्ट रूप से, छाया का आकार मूल वस्तु के आकार से मेल खाता है)। यह ध्यान दिया जाना चाहिए कि यह पैरामीटर विनिर्देश में तुरंत प्रकट नहीं हुआ था, इसलिए, यह इंटरनेट पर कई उदाहरणों में बस नहीं माना जाता है।
छाया बढ़ाने के लिए, आपको एक सकारात्मक स्प्रे पैरामीटर (3.1, 3.2) निर्दिष्ट करने की आवश्यकता है:

 box-shadow:6px 6px 0px 4px darkred; 

कम करने के लिए - नकारात्मक (3.3):

 box-shadow:12px 12px 8px -4px darkred; 

छाया को खींचना या संपीड़ित करना एक स्केलिंग ऑपरेशन के रूप में माना जा सकता है, लेकिन विनिर्देश इसे कुछ और अधिक चालाक रूप से वर्णन करता है (पारदर्शी या अपारदर्शी पिक्सल को धुंधला करने और हटाने के साथ सादृश्य के माध्यम से), जो, हालांकि मामले का सार नहीं बदलता है:

ऊपर (3.4) उदाहरण में, छाया को 6px नीचे और बाईं ओर स्थानांतरित किया गया है और प्रत्येक पक्ष पर 8px तक बढ़ गया है:

 box-shadow:6px 6px 0 8px grey; 

यदि आपका ब्लॉक गोल कोनों का उपयोग करता है, तो इस तथ्य के लिए तैयार रहें कि विस्तारित छाया में पट्टिका की त्रिज्या भी आनुपातिक रूप से मापी जाएगी (3.5):

भीतर की छाया

अंत में, एक और मुश्किल पैरामीटर ब्लॉक के अंदर छाया को लागू करने की क्षमता है। ऐसा करने के लिए, विशेष इनसेट कीवर्ड (4.1-4.4) का उपयोग करें:

 box-shadow:inset 4px 4px rgba(66,66,66,0.5); /* (4.1) */ box-shadow:inset 4px 4px 0 8px rgba(198,198,198,1); /* (4.2) */ box-shadow:inset -2px -2px 8px 0px black; /* (4.3) */ box-shadow:inset 0 0 4px 0px black; /* (4.4) */ 

ध्यान दें कि आंतरिक छाया केवल उसी ब्लॉक के अंदर खींची जाती है जिस पर संबंधित नियम लागू किया जाता है, और बाहरी छाया के विपरीत स्प्रे छाया का उपयोग बाहरी छाया के विपरीत, आंतरिक छाया परिधि को कम करता है।

एकाधिक छाया

खैर, अब एक और बारीकियां हैं: वास्तव में, आप एक ही समय में ब्लॉक करने के लिए किसी भी छाया को लागू कर सकते हैं, इसके लिए उन्हें बॉक्स-छाया के विवरण में अल्पविराम द्वारा अलग करने के लिए सूचीबद्ध करना पर्याप्त है।

उदाहरण के लिए, एक इंद्रधनुष छाया (5.1) प्राप्त करने के लिए, बढ़ती हुई खिंचाव के साथ 7 छायाओं को इंगित करना पर्याप्त है:

 box-shadow: 0 0 2px 1px red, 0 0 2px 2px orange, 0 0 2px 3px yellow, 0 0 2px 4px green, 0 0 2px 5px lightblue, 0 0 2px 6px blue, 0 0 2px 7px violet; 

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

चूंकि छाया स्वतंत्र हैं, आप विभिन्न दिशाओं में व्यवस्थित छाया को आसानी से जोड़ सकते हैं (5.2):

 box-shadow: -6px -6px 8px -4px rgba(255,0,0,0.75), 6px -6px 8px -4px rgba(0,255,0,0.75), 6px 6px 8px -4px rgba(255,255,0,0.75), -6px 6px 8px -4px rgba(0,0,255,0.75); 

इसी तरह, आप तुरंत आंतरिक और बाह्य छाया (5.3) निर्दिष्ट कर सकते हैं:

 box-shadow: inset 0 0 8px lightgray, 1px 1px 3px darkgray; 

या "उन्नत अंडरस्कोर" (5.4):

 box-shadow: 0 1px red, 0 3px 3px -2px black 

या, यदि आप कुछ अधिक कल्पना और अतिरिक्त विशेष प्रभाव दिखाते हैं, तो मैट हैम (5.5) में वर्णित उदाहरण के लिए, एक स्लीक-बॉक्स बनाएं।

 .slick-box { position: relative; height: 50px; border: 1px solid #efefef; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } .slick-box:before, .slick-box:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 70%; max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ height: 55%; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); transform: skew(-15deg) rotate(-6deg); } .slick-box:after { left: auto; right: 10px; transform: skew(15deg) rotate(6deg); } 

(सादगी के लिए, मैंने विक्रेता उपसर्गों के साथ कोड हटा दिया, लेकिन आपको ऐड-मीम्स-ट्रांसफ़ॉर्म, -वेबकिट-ट्रांसफ़ॉर्म इत्यादि को जोड़ना होगा)

सामान्य वाक्यविन्यास

सारांश में, छाया का वर्णन करने का सिंटैक्स इस प्रकार है:

 box-shadow: <shadow> [ , <shadow> ]*; <shadow> = inset? && [ <length>{2,4} && <color>? ] 

उत्तरार्द्ध पूरी तरह से निम्नलिखित योजना में तैनात है:

 box-shadow: inset? h-offset v-offset blur-radius spread-distance color; 

धुंधला त्रिज्या और खिंचाव वैकल्पिक हैं। इनसेट बाहरी से आंतरिक तक छाया प्रदर्शन मोड को स्विच करता है।

इंटरएक्टिव

यदि आप ऑनलाइन छाया के साथ खेलना चाहते हैं, तो हमारे सहयोगियों ने सितंबर में बिल्ड सम्मेलन के लिए हैंड्स-ऑन: बॉक्स-शैडो के लिए एक डेमो पृष्ठ तैयार किया।

इंटरनेट एक्सलर

कई के लिए एक जरूरी सवाल: IE9 और उससे अधिक में बॉक्स-शैडो का समर्थन किया गया है ।

और एक और महत्वपूर्ण विवरण: मानक सीएसएस नियम, इंटरनेट एक्सप्लोरर के 9 वें संस्करण से शुरू, हार्डवेयर त्वरण का उपयोग करके काम करता है - फिल्टर जैसे गैर-मानक पुराने फिल्टर के विपरीत: DXImageTransform.Microsoft.Shadow। यही है, मानकों का उपयोग करना न केवल अधिक सही है, बल्कि अधिक कुशल भी है।

मेरी सलाह: प्रगतिशील उत्साह के विचारों के आधार पर मानक सुविधाओं का उपयोग करने का प्रयास करें।