यह एक ऐसा प्रश्न है जिसे मैंने अक्सर सुना है: क्या ठोस रंगों के बजाय ढालों से छाया बनाना संभव है? कोई विशिष्ट सीएसएस संपत्ति नहीं है जो ऐसा करती है (मुझ पर विश्वास करें, मैंने देखा है) और इसके बारे में आपको मिलने वाली कोई भी ब्लॉग पोस्ट मूल रूप से ग्रेडिएंट का अनुमान लगाने के लिए बहुत सी सीएसएस ट्रिक्स हैं। जैसे ही हम आगे बढ़ेंगे हम वास्तव में उनमें से कुछ को कवर करेंगे।
लेकिन पहले… एक और ढाल छाया के बारे में लेख? वास्तव में?
हां, यह इस विषय पर एक और पोस्ट है, लेकिन यह अलग है। साथ में, हम एक समाधान प्राप्त करने के लिए सीमाओं को आगे बढ़ाने जा रहे हैं जिसमें कुछ ऐसा शामिल है जो मैंने कहीं और नहीं देखा है: पारदर्शिता. अधिकांश तरकीबें काम करती हैं यदि तत्व की गैर-पारदर्शी पृष्ठभूमि है लेकिन क्या होगा यदि हमारे पास पारदर्शी पृष्ठभूमि है? हम यहां इस मामले का पता लगाएंगे!
शुरू करने से पहले, मुझे परिचय दें मेरी ढाल छाया जनरेटर. आपको बस इतना करना है कि कॉन्फ़िगरेशन को समायोजित करना है, और कोड प्राप्त करना है। लेकिन साथ चलें क्योंकि मैं उत्पन्न कोड के पीछे के सभी तर्कों को समझने में आपकी मदद करने जा रहा हूं।
विषय - सूची
गैर-पारदर्शी समाधान
आइए उस समाधान से शुरू करें जो अधिकांश मामलों में 80% के लिए काम करेगा। सबसे विशिष्ट मामला: आप एक पृष्ठभूमि के साथ एक तत्व का उपयोग कर रहे हैं, और आपको इसमें एक ढाल छाया जोड़ने की आवश्यकता है। वहां विचार करने के लिए कोई पारदर्शिता मुद्दे नहीं हैं।
समाधान एक छद्म तत्व पर भरोसा करना है जहां ग्रेडियेंट परिभाषित किया गया है। आप इसे वास्तविक तत्व के पीछे रखते हैं और इसमें ब्लर फिल्टर लगाएं.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
यह बहुत सारे कोड जैसा दिखता है, और ऐसा इसलिए है क्योंकि यह है। यहां बताया गया है कि हम इसे ए के साथ कैसे कर सकते थे box-shadow
इसके बजाय अगर हम एक ढाल के बजाय एक ठोस रंग का उपयोग कर रहे थे।
box-shadow: 10px 8px 10px 5px orange;
इससे आपको इस बात की अच्छी जानकारी मिलनी चाहिए कि पहले स्निपेट के मान क्या कर रहे हैं। हमारे पास एक्स और वाई ऑफ़सेट, ब्लर त्रिज्या और प्रसार दूरी है। ध्यान दें कि हमें प्रसार दूरी के लिए ऋणात्मक मान की आवश्यकता होती है जो इससे आती है inset
संपत्ति।
यहां एक डेमो है जो क्लासिक के आगे ग्रेडिएंट शैडो दिखा रहा है box-shadow
:
यदि आप बारीकी से देखते हैं, तो आप देखेंगे कि दोनों छायाएं थोड़ी अलग हैं, विशेष रूप से धुंधले भाग। यह कोई आश्चर्य की बात नहीं है क्योंकि मुझे पूरा यकीन है filter
संपत्ति का एल्गोरिदम एक से अलग काम करता है box-shadow
. यह कोई बड़ी बात नहीं है क्योंकि परिणाम अंत में काफी समान है।
यह समाधान अच्छा है, लेकिन अभी भी इससे संबंधित कुछ कमियां हैं z-index: -1
घोषणा। हाँ वहाँ है "स्टैकिंग संदर्भ" वहाँ हो रहा है!
मैंने आवेदन किया transform
मुख्य तत्व के लिए, और उछाल! छाया अब तत्व के नीचे नहीं है। यह कोई बग नहीं है बल्कि स्टैकिंग संदर्भ का तार्किक परिणाम है। चिंता न करें, मैं स्टैकिंग संदर्भ के बारे में एक उबाऊ स्पष्टीकरण शुरू नहीं करूंगा (मैंने इसे पहले ही स्टैक ओवरफ़्लो थ्रेड में किया है), लेकिन मैं फिर भी आपको दिखाऊंगा कि इसके आसपास कैसे काम करना है।
मेरा सुझाव है कि पहला समाधान एक 3D का उपयोग करना है transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
के बजाय का उपयोग करने का z-index: -1
, हम Z- अक्ष के साथ एक नकारात्मक अनुवाद का उपयोग करेंगे। हम सब कुछ अंदर डाल देंगे translate3d()
। उपयोग करने के लिए मत भूलना transform-style: preserve-3d
मुख्य तत्व पर; अन्यथा, 3डी transform
प्रभावी नहीं होगा।
जहाँ तक मुझे पता है, इस उपाय का कोई साइड इफेक्ट नहीं है... लेकिन शायद आप एक देखें। यदि ऐसा है, तो इसे टिप्पणी अनुभाग में साझा करें, और आइए इसके लिए कोई समाधान ढूंढने का प्रयास करें!
यदि किसी कारण से आप 3D का उपयोग नहीं कर पा रहे हैं transform
, दूसरा समाधान दो छद्म तत्वों पर भरोसा करना है - ::before
और ::after
. एक ढाल छाया बनाता है, और दूसरा मुख्य पृष्ठभूमि (और अन्य शैलियों की आपको आवश्यकता हो सकती है) को पुन: उत्पन्न करता है। इस तरह, हम दोनों छद्म तत्वों के स्टैकिंग क्रम को आसानी से नियंत्रित कर सकते हैं।
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
यह ध्यान रखना महत्वपूर्ण है कि हम हैं मजबूर घोषित करके स्टैकिंग संदर्भ बनाने के लिए मुख्य तत्व z-index: 0
या, कोई अन्य संपत्ति जो वही करती है, इस पर। साथ ही, यह न भूलें कि छद्म तत्व मुख्य तत्व के पैडिंग बॉक्स को संदर्भ के रूप में मानते हैं। इसलिए, यदि मुख्य तत्व की सीमा है, तो छद्म-तत्व शैलियों को परिभाषित करते समय आपको इसे ध्यान में रखना होगा। आप देखेंगे कि मैं उपयोग कर रहा हूँ inset: -2px
on ::after
मुख्य तत्व पर परिभाषित सीमा के लिए खाते में।
जैसा कि मैंने कहा, यह समाधान शायद अधिकांश मामलों में काफी अच्छा है जहां आप ढाल छाया चाहते हैं, जब तक आपको पारदर्शिता का समर्थन करने की आवश्यकता नहीं है। लेकिन हम यहां चुनौती के लिए और सीमाओं को आगे बढ़ाने के लिए हैं, इसलिए भले ही आपको आगे आने वाली चीजों की आवश्यकता न हो, मेरे साथ रहें। आप शायद नई सीएसएस ट्रिक्स सीखेंगे जिनका आप कहीं और उपयोग कर सकते हैं।
पारदर्शी समाधान
चलिए वहीं से शुरू करते हैं जहां हमने 3डी को छोड़ा था transform
और पृष्ठभूमि को मुख्य तत्व से हटा दें। मैं एक छाया के साथ शुरू करूँगा जिसमें ऑफ़सेट और प्रसार दूरी दोनों बराबर हैं 0
.
विचार यह है कि तत्व के क्षेत्र (हरी सीमा के अंदर) के अंदर सब कुछ काटने या छिपाने का तरीका खोजा जाए, जबकि बाहर क्या है। हम प्रयोग करने जा रहे हैं clip-path
उस के लिए। लेकिन आप सोच सकते हैं कि कैसे clip-path
काट सकता है अंदर तत्व।
दरअसल, ऐसा करने का कोई तरीका नहीं है, लेकिन हम इसे एक विशेष बहुभुज पैटर्न का उपयोग करके अनुकरण कर सकते हैं:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
टाडा! हमारे पास एक ढाल छाया है जो पारदर्शिता का समर्थन करती है। हमने केवल एक जोड़ा है clip-path
पिछले कोड के लिए। यहाँ बहुभुज भाग को दर्शाने के लिए एक चित्र दिया गया है।
लगाने के बाद नीला क्षेत्र दिखाई देने वाला हिस्सा है clip-path
. मैं अवधारणा को स्पष्ट करने के लिए केवल नीले रंग का उपयोग कर रहा हूं, लेकिन वास्तव में, हम उस क्षेत्र के अंदर केवल छाया देखेंगे। जैसा कि आप देख सकते हैं, हमारे पास एक बड़े मान के साथ परिभाषित चार बिंदु हैं (B
). मेरा बड़ा मूल्य है 100vmax
, लेकिन यह कोई भी बड़ा मूल्य हो सकता है जो आप चाहते हैं। विचार यह सुनिश्चित करना है कि हमारे पास छाया के लिए पर्याप्त जगह हो। हमारे पास चार बिंदु भी हैं जो छद्म तत्व के कोने हैं।
तीर उस पथ को दर्शाते हैं जो बहुभुज को परिभाषित करता है। हम से शुरू करते हैं (-B, -B)
जब तक हम नहीं पहुँचते (0,0)
. कुल मिलाकर, हमें 10 अंक चाहिए। आठ बिंदु नहीं क्योंकि पथ में दो बिंदु दो बार दोहराए जाते हैं ((-B,-B)
और (0,0)
).
अभी भी है एक और चीज़ हमें करने के लिए छोड़ दिया है, और यह प्रसार दूरी और ऑफ़सेट के लिए खाता है। ऊपर दिए गए डेमो के काम करने का एकमात्र कारण यह है कि यह एक विशेष मामला है जहां ऑफसेट और प्रसार दूरी बराबर होती है 0
.
आइए प्रसार को परिभाषित करें और देखें कि क्या होता है। याद रखें कि हम प्रयोग करते हैं inset
ऐसा करने के लिए नकारात्मक मूल्य के साथ:
छद्म तत्व अब मुख्य तत्व से बड़ा है, इसलिए clip-path
हमें जरूरत से ज्यादा काटता है। याद रखें, हमें हमेशा हिस्सा काटने की जरूरत है अंदर मुख्य तत्व (उदाहरण के हरे रंग की सीमा के अंदर का क्षेत्र)। हमें अंदर के चार बिंदुओं की स्थिति को समायोजित करने की आवश्यकता है clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
हमने एक CSS वेरिएबल परिभाषित किया है, --s
, प्रसार दूरी के लिए और बहुभुज बिंदुओं को अद्यतन किया। मैंने उन बिंदुओं को नहीं छुआ जहां मैं बड़े मूल्य का उपयोग कर रहा हूं। मैं केवल उन बिंदुओं को अद्यतन करता हूं जो छद्म तत्व के कोनों को परिभाषित करते हैं। मैं सभी शून्य मानों को बढ़ाता हूं --s
और कम करें 100%
द्वारा मान --s
.
ऑफसेट के साथ भी यही तर्क है। जब हम छद्म तत्व का अनुवाद करते हैं, तो छाया संरेखण से बाहर हो जाती है, और हमें बहुभुज को फिर से सुधारने और बिंदुओं को विपरीत दिशा में स्थानांतरित करने की आवश्यकता होती है।
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
ऑफ़सेट के लिए दो और चर हैं: --x
और --y
. हम उन्हें अंदर उपयोग करते हैं transform
और हम अपडेट भी करते हैं clip-path
मान। हम अभी भी बड़े मूल्यों वाले बहुभुज बिंदुओं को नहीं छूते हैं, लेकिन हम अन्य सभी को ऑफसेट करते हैं - हम कम करते हैं --x
एक्स निर्देशांक से, और --y
वाई निर्देशांक से।
अब हमें बस इतना करना है कि ग्रेडिएंट शैडो को नियंत्रित करने के लिए कुछ वेरिएबल्स को अपडेट करना है। और जब हम इस पर हैं, तो ब्लर रेडियस को भी एक वेरिएबल बनाते हैं:
क्या हमें अब भी 3डी की जरूरत है
transform
चाल?
यह सब सीमा पर निर्भर करता है। यह न भूलें कि छद्म-तत्व का संदर्भ पैडिंग बॉक्स है, इसलिए यदि आप अपने मुख्य तत्व पर सीमा लागू करते हैं, तो आपके पास एक ओवरलैप होगा। आप या तो 3D रखें transform
ट्रिक या अपडेट करें inset
मूल्य सीमा के लिए खाते में।
यहाँ एक अद्यतन के साथ पिछला डेमो है inset
3D के स्थान पर मूल्य transform
:
मैं कहूंगा कि यह जाने का एक और उपयुक्त तरीका है क्योंकि फैलाव दूरी अधिक सटीक होगी, क्योंकि यह पैडिंग-बॉक्स की बजाय सीमा-बॉक्स से शुरू होती है। लेकिन आपको समायोजित करने की आवश्यकता होगी inset
मुख्य तत्व की सीमा के अनुसार मूल्य। कभी-कभी, तत्व की सीमा अज्ञात होती है और आपको पिछले समाधान का उपयोग करना पड़ता है।
पहले के गैर-पारदर्शी समाधान के साथ, यह संभव है कि आपको स्टैकिंग संदर्भ समस्या का सामना करना पड़े। और पारदर्शी समाधान के साथ, यह संभव है कि आपको इसके बजाय सीमा संबंधी समस्या का सामना करना पड़े। अब आपके पास उन मुद्दों के आसपास काम करने के विकल्प और तरीके हैं। 3D ट्रांसफ़ॉर्म ट्रिक मेरा पसंदीदा समाधान है क्योंकि यह सभी मुद्दों को ठीक करता है (ऑनलाइन जनरेटर इस पर भी विचार करेंगे)
एक सीमा त्रिज्या जोड़ना
यदि आप जोड़ने का प्रयास करते हैं border-radius
उस गैर-पारदर्शी समाधान का उपयोग करते समय तत्व के लिए, जिसके साथ हमने शुरुआत की थी, यह काफी तुच्छ कार्य है। आपको बस इतना करना है कि मुख्य तत्व से वही मूल्य प्राप्त करना है, और आप कर चुके हैं।
यहां तक कि अगर आपके पास सीमा त्रिज्या नहीं है, तो इसे परिभाषित करना एक अच्छा विचार है border-radius: inherit
. यह किसी भी क्षमता के लिए खाता है border-radius
हो सकता है कि आप बाद में या किसी अन्य स्थान से आने वाला बॉर्डर दायरा जोड़ना चाहें.
पारदर्शी समाधान से निपटने के दौरान यह एक अलग कहानी है। दुर्भाग्य से, इसका मतलब एक और समाधान खोजना है क्योंकि clip-path
वक्रता से नहीं निपट सकता। इसका मतलब है कि हम मुख्य तत्व के अंदर के क्षेत्र में कटौती नहीं कर पाएंगे।
हम परिचय देंगे mask
मिश्रण के लिए संपत्ति।
यह हिस्सा बहुत ही थकाऊ था, और मैं एक सामान्य समाधान खोजने के लिए संघर्ष कर रहा था जो भरोसा नहीं करता जादू नंबर. मैं एक बहुत ही जटिल समाधान के साथ समाप्त हुआ जो केवल एक छद्म तत्व का उपयोग करता है, लेकिन कोड स्पेगेटी का एक ढेर था जो केवल कुछ विशेष मामलों को कवर करता है। मुझे नहीं लगता कि यह उस मार्ग की खोज के लायक है।
मैंने सरल कोड के लिए एक अतिरिक्त तत्व सम्मिलित करने का निर्णय लिया। यहाँ मार्कअप है:
<div class="box"> <sh></sh>
</div>
मैं एक कस्टम तत्व का उपयोग कर रहा हूँ, <sh>
, बाहरी CSS के साथ किसी भी संभावित विरोध से बचने के लिए। मैं एक इस्तेमाल कर सकता था <div>
, लेकिन चूँकि यह एक सामान्य तत्व है, इसे आसानी से किसी अन्य CSS नियम द्वारा लक्षित किया जा सकता है जो हमारे कोड को भंग कर सकता है।
स्थिति के लिए पहला कदम है <sh>
तत्व और जानबूझकर एक अतिप्रवाह बनाएँ:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
कोड थोड़ा अजीब लग सकता है, लेकिन जैसे-जैसे हम आगे बढ़ेंगे, हम इसके पीछे के तर्क को समझेंगे। अगला, हम के छद्म तत्व का उपयोग करके ग्रेडिएंट शैडो बनाते हैं <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
जैसा कि आप देख सकते हैं, छद्म तत्व पिछले सभी उदाहरणों के समान कोड का उपयोग करता है। फर्क सिर्फ 3डी का है transform
पर परिभाषित <sh>
छद्म तत्व के बजाय तत्व। फिलहाल, हमारे पास पारदर्शिता सुविधा के बिना ग्रेडिएंट शैडो है:
ध्यान दें कि का क्षेत्रफल <sh>
तत्व को काली रूपरेखा के साथ परिभाषित किया गया है। मैं ऐसा क्यों कर रहा हूँ? क्योंकि इस तरह, मैं एक आवेदन करने में सक्षम हूं mask
उस पर हरे क्षेत्र के अंदर के हिस्से को छिपाने के लिए और अतिप्रवाह वाले हिस्से को रखने के लिए जहां हमें छाया देखने की जरूरत है।
मुझे पता है कि यह थोड़ा मुश्किल है, लेकिन इसके विपरीत clip-path
, mask
संपत्ति क्षेत्र के लिए खाता नहीं है बाहर चीजों को दिखाने और छिपाने का एक तत्व। इसलिए मुझे "बाहर" क्षेत्र का अनुकरण करने के लिए - अतिरिक्त तत्व पेश करने के लिए बाध्य किया गया था।
साथ ही, ध्यान दें कि मैं के संयोजन का उपयोग कर रहा हूं border
और inset
उस क्षेत्र को परिभाषित करने के लिए। यह मुझे उस अतिरिक्त तत्व के पैडिंग-बॉक्स को मुख्य तत्व के समान रखने की अनुमति देता है ताकि छद्म-तत्व को अतिरिक्त गणनाओं की आवश्यकता न हो।
एक और उपयोगी चीज जो हमें एक अतिरिक्त तत्व का उपयोग करने से मिलती है वह यह है कि तत्व निश्चित है, और केवल छद्म तत्व चल रहा है (का उपयोग करके) translate
). यह मुझे मास्क को आसानी से परिभाषित करने की अनुमति देगा, जो कि है पिछली बार इस ट्रिक का चरण।
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
यह हो चुका है! हमारे पास अपनी ग्रेडिएंट शैडो है, और यह सपोर्ट करती है border-radius
! आपने शायद एक कॉम्प्लेक्स की उम्मीद की थी mask
ढेरों ग्रेडिएंट्स के साथ मूल्य, लेकिन नहीं! हमें केवल दो साधारण ग्रेडियेंट की आवश्यकता है और ए mask-composite
जादू को पूरा करने के लिए।
आइए अलग करें <sh>
वहां क्या हो रहा है यह समझने के लिए तत्व:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
यहाँ हमें क्या मिलता है:
ध्यान दें कि आंतरिक त्रिज्या मुख्य तत्व से कैसे मेल खाती है border-radius
. मैंने एक बड़ी सीमा परिभाषित की है (150px
) और एक border-radius
बड़ी सीमा के बराबर प्लस मुख्य तत्व की त्रिज्या। बाहर की तरफ, मेरे पास त्रिज्या के बराबर है 150px + R
. अंदर पर, मेरे पास है 150px + R - 150px = R
.
हमें आंतरिक (नीला) भाग छिपाना चाहिए और सुनिश्चित करना चाहिए कि सीमा (लाल) भाग अभी भी दिखाई दे। ऐसा करने के लिए, मैंने दो मुखौटा परतों को परिभाषित किया है - एक जो केवल सामग्री-बॉक्स क्षेत्र को कवर करता है और दूसरा जो सीमा-बॉक्स क्षेत्र (डिफ़ॉल्ट मान) को कवर करता है। फिर मैंने सीमा को प्रकट करने के लिए एक को दूसरे से अलग कर दिया।
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
मैंने उसी तकनीक का इस्तेमाल किया एक बॉर्डर बनाएं जो ग्रेडिएंट्स को सपोर्ट करता हो और border-radius
. एना ट्यूडर का भी एक अच्छा लेख है मास्किंग कम्पोजिट के बारे में कि मैं आपको पढ़ने के लिए आमंत्रित करता हूं।
क्या इस पद्धति में कोई कमियां हैं?
हाँ, यह निश्चित रूप से संपूर्ण नहीं है। आपके सामने आने वाली पहली समस्या मुख्य तत्व पर बॉर्डर का उपयोग करने से संबंधित है। यदि आप इसका लेखा-जोखा नहीं रखते हैं तो यह त्रिज्या में एक छोटा मिसलिग्न्मेंट बना सकता है। हमारे उदाहरण में यह समस्या है, लेकिन शायद आप शायद ही इसे नोटिस कर सकें।
फिक्स अपेक्षाकृत आसान है: के लिए बॉर्डर की चौड़ाई जोड़ें <sh>
तत्व का inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
एक और दोष यह है कि हम सीमा के लिए उपयोग कर रहे हैं (150px
उदाहरण में)। यह मान छाया रखने के लिए पर्याप्त बड़ा होना चाहिए लेकिन अतिप्रवाह और स्क्रॉलबार समस्याओं से बचने के लिए इतना बड़ा नहीं होना चाहिए। किस्मत से, ऑनलाइन जनरेटर सभी मापदंडों पर विचार करते हुए इष्टतम मूल्य की गणना करेगा।
आखिरी कमी जिसके बारे में मुझे पता है वह है जब आप जटिल के साथ काम कर रहे हैं border-radius
. उदाहरण के लिए, यदि आप चाहते हैं कि प्रत्येक कोने पर एक अलग त्रिज्या लागू हो, तो आपको प्रत्येक पक्ष के लिए एक चर परिभाषित करना होगा। मुझे लगता है कि यह वास्तव में कोई कमी नहीं है, लेकिन यह आपके कोड को बनाए रखने के लिए थोड़ा कठिन बना सकता है।
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
ऑनलाइन जनरेटर सादगी के लिए केवल एक समान त्रिज्या पर विचार करता है, लेकिन अब आप जानते हैं कि यदि आप एक जटिल त्रिज्या विन्यास पर विचार करना चाहते हैं तो कोड को कैसे संशोधित करें।
ऊपर लपेटकर
हम अंत तक पहुँच चुके हैं! ग्रेडिएंट शैडो के पीछे का जादू अब कोई रहस्य नहीं है। मैंने सभी संभावनाओं और आपके सामने आने वाली किसी भी संभावित समस्या को कवर करने का प्रयास किया है। अगर मुझे कुछ याद आती है या आपको कोई समस्या मिलती है, तो कृपया टिप्पणी अनुभाग में इसकी रिपोर्ट करने में संकोच न करें, और मैं इसे देख लूंगा।
दोबारा, यह देखते हुए कि वास्तविक समाधान आपके अधिकांश उपयोग मामलों को कवर करेगा, इसमें से बहुत कुछ अधिक होने की संभावना है। फिर भी, चाल के पीछे "क्यों" और "कैसे" जानना अच्छा है, और इसकी सीमाओं को कैसे दूर किया जाए। साथ ही, हमें CSS क्लिपिंग और मास्किंग के साथ खेलने का अच्छा अभ्यास मिला।
और, ज़ाहिर है, आपके पास है ऑनलाइन जनरेटर आप परेशानी से बचने के लिए किसी भी समय पहुंच सकते हैं।
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- योग्य
- About
- इसके बारे में
- ऊपर
- पूर्ण
- अनुसार
- लेखा
- अकौन्टस(लेखा)
- सही
- वास्तव में
- अतिरिक्त
- बाद
- कलन विधि
- सब
- की अनुमति देता है
- पहले ही
- हमेशा
- एना
- और
- अन्य
- कहीं भी
- लागू
- लागू करें
- लागू
- क्षेत्र
- चारों ओर
- लेख
- से बचने
- पृष्ठभूमि
- मूल रूप से
- क्योंकि
- से पहले
- पीछे
- मानना
- नीचे
- बड़ा
- बड़ा
- बिट
- काली
- ब्लॉग
- नीला
- कलंक
- सीमा
- बोरिंग
- मुक्केबाज़ी
- टूटना
- दोष
- गणना
- नही सकता
- मामला
- मामलों
- चुनौती
- चेक
- क्लासिक
- क्लिप-पथ
- निकट से
- कोड
- रंग
- संयोजन
- अ रहे है
- टिप्पणी
- सामान्य
- पूरा
- जटिल
- संकल्पना
- विन्यास
- संघर्ष
- विचार करना
- पर विचार
- समझता है
- सामग्री
- प्रसंग
- नियंत्रण
- कोना
- कोनों
- सका
- पाठ्यक्रम
- आवरण
- शामिल किया गया
- बनाना
- बनाता है
- सीएसएस
- सीएसएस ट्रिक्स
- रिवाज
- कट गया
- कटौती
- सौदा
- व्यवहार
- का फैसला किया
- कमी
- चूक
- परिभाषित
- परिभाषित करता है
- परिभाषित करने
- निश्चित रूप से
- डेमो
- निर्भर करता है
- डीआईडी
- अंतर
- विभिन्न
- दिशा
- अन्य वायरल पोस्ट से
- दूरी
- नहीं करता है
- कर
- dont
- कमियां
- से प्रत्येक
- पूर्व
- आसानी
- प्रभाव
- भी
- अन्यत्र
- पर्याप्त
- सुनिश्चित
- विशेष रूप से
- ईथर (ईटीएच)
- और भी
- सब कुछ
- उदाहरण
- उदाहरण
- अपवर्जित
- व्यायाम
- अपेक्षित
- स्पष्टीकरण
- का पता लगाने
- तलाश
- बाहरी
- अतिरिक्त
- चेहरा
- वास्तविक
- काफी
- पसंदीदा
- Feature
- कुछ
- आकृति
- फ़िल्टर
- खोज
- खोज
- प्रथम
- फिक्स
- तय
- का पालन करें
- सेना
- मुक्त
- से
- सामान्य जानकारी
- उत्पन्न
- मिल
- देना
- Go
- जा
- अच्छा
- ढ़ाल
- हरा
- हो जाता
- मदद
- यहाँ उत्पन्न करें
- छिपाना
- कैसे
- How To
- एचटीएमएल
- HTTPS
- मैं करता हूँ
- विचार
- महत्वपूर्ण
- in
- बढ़ना
- बजाय
- परिचय कराना
- आमंत्रित करना
- मुद्दा
- मुद्दों
- IT
- रखना
- रखना
- जानना
- पिछली बार
- परतों
- जानें
- संभावित
- सीमाओं
- सीमाएं
- थोड़ा
- लंबा
- लंबे समय तक
- देखिए
- देखा
- लग रहा है
- लॉट
- जादू
- मुख्य
- बनाए रखना
- बहुमत
- बनाना
- मुखौटा
- साधन
- तरीका
- हो सकता है
- संशोधित
- पल
- अधिक
- अधिकांश
- चाल
- चलती
- मोज़िला
- रहस्य
- आवश्यकता
- नकारात्मक
- फिर भी
- नया
- अगला
- ओफ़्सेट
- ONE
- ऑनलाइन
- विपरीत
- इष्टतम
- ऑप्शंस
- नारंगी
- आदेश
- अन्य
- अन्य
- अन्यथा
- रूपरेखा
- बाहर
- काबू
- पैरामीटर
- भाग
- विशेष
- पथ
- पैटर्न
- उत्तम
- शायद
- चुनना
- जगह
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- खेल
- कृप्या अ
- प्लस
- अंक
- बहुभुज
- स्थिति
- संभावनाओं
- संभव
- पद
- संभावित
- सुंदर
- पिछला
- शायद
- संपत्ति
- धक्का
- रखना
- प्रश्न
- पहुंच
- पहुँचे
- पढ़ना
- वास्तविकता
- कारण
- की सिफारिश
- लाल
- को कम करने
- सम्बंधित
- अपेक्षाकृत
- भरोसा करना
- याद
- हटाना
- दोहराया गया
- रिपोर्ट
- परिणाम
- प्रकट
- मार्ग
- नियम
- कहा
- कारण
- वही
- अनुभाग
- छाया
- Share
- चाहिए
- दिखाना
- समान
- सरल
- सादगी
- के बाद से
- छोटा
- So
- ठोस
- समाधान
- कुछ
- कुछ
- कहीं न कहीं
- अंतरिक्ष
- विशिष्ट
- विस्तार
- धुआँरा
- स्टैकिंग
- प्रारंभ
- शुरू
- शुरू होता है
- रहना
- कदम
- फिर भी
- कहानी
- उपयुक्त
- समर्थन
- समर्थन करता है
- आश्चर्य
- लेना
- लक्षित
- कार्य
- RSI
- क्षेत्र
- बात
- चीज़ें
- सोचना
- सेवा मेरे
- एक साथ
- भी
- विषय
- कुल
- स्पर्श
- बदालना
- अनुवाद करना
- अनुवाद करें
- ट्रांसपेरेंसी
- पारदर्शी
- चाल
- <strong>उद्देश्य</strong>
- ठेठ
- समझना
- अपडेट
- अद्यतन
- us
- उपयोग
- मूल्य
- मान
- दिखाई
- तरीके
- क्या
- एचएमबी क्या है?
- कौन कौन से
- जब
- मर्जी
- बिना
- काम
- काम कर रहे
- कार्य
- लायक
- X
- आपका
- z- सूचकांक
- जेफिरनेट
- शून्य