W3C डेवलपर्स ने बॉक्स-शैडो को एक बहुत ही लचीला फीचर बनाया है। इसके लिए धन्यवाद, बहुत ही रोचक परिणाम प्राप्त किए जा सकते हैं यदि इस संपत्ति का उपयोग गैर-तुच्छ तरीके से किया जाता है। इस लेख में मैं उन कुछ प्रभावों के बारे में लिखूंगा जो मैंने "छाया प्रौद्योगिकी" की सहायता से प्राप्त करने में कामयाब रहे।
जब मैं उदाहरणों को संकलित कर रहा था, मुझे अप्रत्याशित रूप से पता चला कि ब्राउज़र उन्हें काफी अलग तरीके से प्रदर्शित करते हैं। परिणामस्वरूप, बॉक्स-शैडो क्षमताओं के एक साधारण प्रदर्शन के अलावा, हमें CSS 3 का समर्थन करने के लिए एक छोटा ब्राउज़र परीक्षण भी मिला। सभी उदाहरण CSS कोड और एक तस्वीर (सभी PNG की कुल राशि 161 KB) से लैस हैं। लेख में, मैंने विक्रेता उपसर्गों के साथ गुणों को निर्धारित नहीं किया है -moz- और -webkit-, ताकि पठनीयता ख़राब न हो।
सभी उदाहरणों के साथ सारांश पृष्ठ में, ये उपसर्ग हैं (मैं आपको चेतावनी देता हूं कि ओपेरा में स्क्रॉल करते समय बाहरी बॉक्स-छाया खींचने के साथ एक बग है)।
क्लोनिंग (लूप)
बॉक्स-छाया संपत्ति आपको कई छाया बनाने की अनुमति देती है, जिसका उपयोग बहुत ही अजीब तरीके से किया जा सकता है। नीचे एक दिव्य तत्व है जिसमें एक प्रकार का लूप होता है (कुछ खेलों में, गोले ऐसे "पूंछ" के बारे में बताते हैं)।
मुझे यह कैसे मिला? यह सिर्फ अलग स्थिति और रंग के साथ कुछ "छाया" बनाने के लिए लिया। मैं आपको बॉक्स-छाया संपत्ति के रैखिक आयामों की याद दिलाता हूं: एक्स अक्ष के साथ इंडेंटेशन (दाईं ओर सकारात्मक मूल्य, बाईं ओर नकारात्मक मूल्य), वाई अक्ष के साथ इंडेंटेशन, धब्बा त्रिज्या और अंतिम पैमाने पर।
ब्राउज़र कैसे काम करता है? ओपेरा और फ़ायरफ़ॉक्स में कोई समस्या नहीं थी। वेबकिट ब्राउज़रों के लिए, उन्हें सीटी बजाना पसंद है। उन्होंने "छाया" वर्ग चित्रित किया, सर्कल के असली सार को उजागर किया: कोनों के अधिकतम गोलाई के साथ एक वर्ग। यह, ज़ाहिर है, दिलचस्प है, लेकिन विफल है। वैसे, यह बहुत ही उल्लेखनीय है कि उन्होंने फिर भी बहुत ही अंतिम "छाया" गोल खींचा (यदि आप इसे बिल्कुल नहीं देखते हैं, तो यह आपके मॉनिटर के सरगम से निपटने का समय है)।
#trail { background: #d0d0d0; border: 1px solid #c0c0c0; border-radius: 40px; box-shadow: #d8d8d8 110px -25px 0 -10px, #e0e0e0 210px 15px 0 -15px, #e8e8e8 310px -10px 0 -20px, #f0f0f0 410px 5px 0 -25px, #f4f4f4 510px 0px 0 -30px; height: 75px; margin: 20px; width: 75px; }
चमक
किसी भी छाया को एक उज्ज्वल रंग में चित्रित किया जा सकता है और बहुत धुंधला हो सकता है जो चमक प्रभाव के लिए उपयोग किया जा सकता है। चूंकि सीएसएस बॉक्स-शैडो अनुमति देता है, इसलिए इसका उपयोग क्यों नहीं करते?
यह मेरे लिए कैसे काम करता है? मैंने हलके लाल रंग से वृत्त (वर्ग) को भरा और 2 लाल धुंधली "छाया" को बाहर निकाला: एक अंदर, दूसरा बाहर। इस प्रकार, मुझे एक चमक प्रभाव मिला, जिसमें मध्य भाग उज्जवल प्रतीत होता है। किसी भी मामले में, सितारे आमतौर पर उसी तरह आकर्षित होते हैं।
ब्राउज़र कैसे काम करता है? किसी भी ब्राउज़र ने यह पूरी तरह से नहीं किया है। ओपेरा और फ़ायरफ़ॉक्स (साथ ही सफारी, लेकिन इतना स्पष्ट नहीं) किसी कारण से तत्व के चारों ओर एक पतली प्रकाश स्ट्रोक के साथ सामने आया। मॉनिटर का गामा जितना अधिक होगा, उतना ही ध्यान देने योग्य होगा।
सिद्धांत रूप में, तत्व को पारदर्शी बनाने और केवल बाहरी "छाया" को छोड़कर इस स्ट्रोक से बचा जा सकता है। लेकिन तब केंद्र में एक लाइटर क्षेत्र का कोई प्रभाव नहीं होगा। अरे नहीं। यह पता चला है कि मानक तत्व के तहत छाया को फसल करने के लिए निर्धारित करता है, इसलिए पारदर्शिता मदद नहीं करती है। अब यह स्पष्ट है कि सीमा कहां से आई है: यह एंटी-अलियासिंग सफारी और क्रोम है जिसने चमक को पर्याप्त रूप से गोल नहीं किया है। क्रोम सिर्फ एक गड़बड़ है।
#glow { background: #ff8080; border-radius: 40px; box-shadow: inset #ff0000 0 0 40px 10px, #ff0000 0 0 24px 12px; height: 75px; margin: 45px; width: 75px; }
एकाधिक सीमा
आपको कभी-कभी किसी तत्व के चारों ओर दो या अधिक लाइनों का उपयोग करने की आवश्यकता हो सकती है। रूपरेखा केवल एक अतिरिक्त देगी, और सभी ब्राउज़र इसे गोल नहीं करेंगे। सीमा-शैली की कल्पना सीमित है। इस मामले में, बॉक्स-छाया मदद करेगा। इस उदाहरण में ट्रेडमिल को दर्शाया गया है।
मुझे यह कैसे मिला? विभिन्न पैमाने (आकार) के साथ एक पंक्ति में कई "छाया" लागू करना आवश्यक है। भूरे रंग की पटरियों के लिए, मैंने पिछली छाया (अच्छी तरह से, या फ्रेम) की तुलना में 3 पिक्सेल से ज़ूम किया। सफेद रेखा के लिए - एक पिक्सेल। यह याद रखना चाहिए कि गहरी परतें सूची में अंतिम होनी चाहिए, क्योंकि ऑर्डर मायने रखता है)।
ब्राउज़र कैसे काम करता है? ओपेरा और फ़ायरफ़ॉक्स ने लगभग पहचान बनाई। लेकिन क्रोम और सफारी ने कुछ कृत्रिम निद्रावस्था दिखाई। यहां, आप पिछले उदाहरण (चमक) में अपर्याप्त रूप से गोल "छाया" का कारण पा सकते हैं। यह पता चलता
है कि छाया के बढ़ने / घटने के अनुपात में वेबकिट्स छाया के लिए बॉर्डर-त्रिज्या को बढ़ाते या घटाते
नहीं हैं । कष्टप्रद जंब।
#multi-border { background: #804020; border: 1px solid #ffffff; border-radius: 40px; box-shadow: inset #804020 0 0 0 3px, inset #ffffff 0 0 0 4px, inset #804020 0 0 0 7px, inset #ffffff 0 0 0 8px, #804020 0 0 0 3px, #ffffff 0 0 0 4px, #804020 0 0 0 7px, #ffffff 0 0 0 8px, #804020 0 0 0 15px; height: 75px; margin: 35px; width: 150px; }
आयतन प्रभाव (उभार)
बॉक्स-शैडो की मदद से आप एक अच्छे तत्व को स्वैच्छिक बना सकते हैं। कई लोग आज छद्म मात्रा वाले ग्राफिक्स का दुरुपयोग कर रहे हैं, लेकिन इस लेख में हम अच्छे फॉर्म के डिजाइन नियमों के बारे में बात नहीं कर रहे हैं।
यह मेरे लिए कैसे काम करता है? यह दो आंतरिक "छाया" बनाने के लिए आवश्यक था: एक प्रकाश, दूसरा अंधेरा। प्रकाश - दाईं ओर शिफ्ट के साथ, अंधेरा - बाईं ओर। उसी समय, सफेद और काले रंगों की पारभासी का उपयोग करके हल्का और गहरा "छाया" बनाया जाना चाहिए। पारभासी (यदि अल्फा चैनल सही ढंग से समायोजित किए गए हैं) के कारण, अंधेरे और प्रकाश "छाया" के संगम बिंदु पृष्ठभूमि के रंग के करीब एक रंग का अधिग्रहण करते हैं। अन्यथा, "छाया" में से एक प्रबल होगा, जो यथार्थवाद को कम करेगा। यदि उदाहरण में, "छाया" के धुंधलापन को रीसेट किया जाता है, तो यह समझना आसान होगा कि कोड कैसे काम करता है।
ब्राउज़र कैसे काम करता है? हम मानते हैं कि ओपेरा, फ़ायरफ़ॉक्स और सफारी आयताकार आयतन को एक ही तरह से आकर्षित करते हैं। क्रोम के लिए, यहां हम पिछले उदाहरणों में कुछ शोलों का कारण पाते हैं: आंतरिक "छाया" हमेशा सीमा-त्रिज्या से बाहर निकलते हैं।
#embossment { background: #404040; border-radius: 20px; box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px, inset rgba(0,0,0,0.5) -8px -8px 18px 5px; height: 75px; margin: 20px; width: 150px; }
ढाल
पागलपन मजबूत होता है। अब बॉक्स-शैडो का उपयोग करके एक इंद्रधनुष ढाल बनाएं। सामान्य तौर पर,
W3C ड्राफ्ट में ग्रेडिएंट प्रदान किए जाते हैं, लेकिन ओपेरा अभी तक उनका समर्थन नहीं करता है। तो इसमें व्यावहारिक लाभ, विचित्र रूप से पर्याप्त है।
यह मेरे लिए कैसे काम करता है? सबसे पहले, आयत एक लाल पृष्ठभूमि से भर गई। फिर, बदले में, मैंने आवश्यक रंगों के "छाया" लागू किए (सुविधा के लिए, पहले धुंधला के बिना): पीला, हरा, नीला, नीला, बैंगनी, फिर से लाल। प्रत्येक बाद के रंग को गहराई से अधिक होना चाहिए और दाईं ओर स्थानांतरित कर दिया गया ताकि पिछला रंग दिखाई दे। फिर मैंने कलंक लगाया: त्रिज्या ढाल में रंग की लंबाई से मेल खाना चाहिए। जैसे ही मैंने परिणाम देखा, मुझे याद आया कि धुंधलापन सभी दिशाओं में जाता है, न कि केवल पक्षों पर, जिसके कारण पूरे ढाल के ऊपरी और निचले हिस्से लाल पृष्ठभूमि से गुजरते हैं। इस प्रभाव से छुटकारा पाने के लिए, मुझे सभी "छाया" को बढ़ाना था और फिर आकार में परिवर्तन की भरपाई के लिए उन्हें उसी राशि से दाईं ओर स्थानांतरित करना था। नियंत्रण के लिए, बिना धब्बा के जाँच की गई। हो गया।
ब्राउज़र कैसे काम करता है? ओपेरा और फ़ायरफ़ॉक्स ने फिर से एक समान परिणाम दिखाया। क्रोम ने छाया के न्यूनतम धुंधलापन के स्थानों में समृद्ध रंग दिखाया। मैं यह कहने के लिए उद्यम नहीं करूंगा कि किसने सही काम किया। ऐसा लगता है कि सच्चाई बीच में है। सफारी ने "छाया" को बहुत कमजोर तरीके से उड़ा दिया, इसलिए ढाल स्पष्ट रूप से गलत हो गई। Chrome को छोड़कर सभी ब्राउज़र धीमे धीमे ब्लॉक पर स्क्रॉल करते हुए धीमे हो गए। सफारी ने अधूरी करामाती को धीमा कर दिया।
#gradient { background: #ff0000; border: 1px solid #000000; box-shadow: inset #FF0000 -150px 0 100px -100px, inset #FF00FF -250px 0 100px -100px, inset #0000FF -350px 0 100px -100px, inset #00FFFF -450px 0 100px -100px, inset #00FF00 -550px 0 100px -100px, inset #FFFF00 -650px 0 100px -100px; height: 200px; margin: 20px; width: 600px; }
लपटें!
खैर, अब फ्री-कोडिंग के एपोथोसिस: बॉक्स-छाया के साथ आग! मैंने शायद उसे लगभग 2 घंटे तक मार दिया, क्योंकि मुझे लगातार इसे फिर से करना पड़ा। इस उदाहरण में ज़मीन के समानांतर एक जलते हुए मैच को दिखाया गया है और इसके सिर को दर्शक की ओर घुमाया गया है। यह निश्चित रूप से बहुत विश्वसनीय नहीं है। लेकिन यह सीएसएस में एक लौ है!
मुझे यह कैसे मिला? कोई टिप्पणी नहीं, तुरंत कोड देखें :)
ब्राउज़र कैसे काम करता है? ओपेरा और फ़ायरफ़ॉक्स में न्यूनतम अंतर है। सफारी की "छाया" फिर से बहुत चौकोर है, इसलिए लौ व्यापक रूप से सामने आई। मैच के प्रमुख के पीछे कुछ अजीब काला वर्ग है। क्रोम ने आग को बहुत व्यापक बना दिया, लेकिन इसके अलावा, धुंधला भी बहुत मोटा था।
<div id="black-background"> <div id="burning"></div> </div>
#black-background {background: #000000;} #burning { background: #402000; border-radius: 40px; box-shadow: inset #806040 0 0 10px 2px, #102030 0px 0px 20px 6px, #c8d8e0 0px -10px 17px 4px, #d8e8f0 0px -20px 15px -2px, #e0f0f8 0px -30px 14px -6px, #e8f8ff 0px -40px 12px -9px, #ffffff 0px -50px 10px -12px, #ffffe0 0px -55px 10px -14px, #ffffc0 0px -60px 10px -20px, #ffffa0 0px -62px 10px -22px, #ffff80 0px -64px 10px -24px, #ffff40 0px 0px 15px 4px, #ffff30 0px -10px 13px 6px, #ffff20 0px -20px 12px 8px, #ffff10 0px -30px 11px 6px, #ffff00 0px -40px 10px 4px, #fff000 0px -50px 10px 2px, #ffe000 0px -60px 10px 0px, #ffd000 0px -70px 10px -4px, #ffc000 0px -80px 10px -6px, #ffa000 0px -90px 10px -10px, #ff8000 0px -100px 10px -14px, #ff6000 0px -110px 10px -16px, #ff4000 0px -120px 10px -20px, #ff2000 0px -124px 10px -22px, #ff0000 0px -127px 10px -24px; height: 60px; margin: 125px 35px 30px 35px; width: 60px; }
UPD: IE9 PP4 से कृपया प्रदान किए गए
स्क्रीनशॉट से , हम कह सकते हैं कि नया IE बहुत अच्छा है।