सीएसएस का उपयोग करके एक तत्व पर एकाधिक ड्रॉप-शैडो प्राप्त करना

सीएसएस में एक फ़ोटोशॉप बटन डिज़ाइन को फिर से बनाने का प्रयास करते समय, आपको एक पर एकाधिक बॉक्स छाया लागू करने में एक सीमा का सामना करना पड़ सकता है एकल तत्व. डिफ़ॉल्ट रूप से, CSS केवल एक सक्रिय बॉक्स-छाया की अनुमति देता है, या तो आंतरिक या बाहरी।

इस सीमा को पार करने के लिए, आप CSS3 द्वारा प्रदान की गई अल्पविराम-पृथक्करण सुविधा का लाभ उठा सकते हैं। यह आपको एक ही बॉक्स-शैडो प्रॉपर्टी के भीतर कई छाया परिभाषाएँ निर्दिष्ट करने की अनुमति देता है:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

अलग करके अल्पविराम के साथ दो छाया परिभाषाएँ, आप प्रभावी ढंग से अपने बटन तत्व पर दो अलग-अलग छायाएँ बना सकते हैं। पहली छाया, इनसेट 0 2px 0px #dcffa6, आंतरिक प्रकाश बॉक्स छाया का प्रतिनिधित्व करती है, जबकि दूसरी छाया, 0 2px 5px #000, बाहरी ड्रॉप छाया बनाती है।

यह तकनीक आपको वांछित बटन प्राप्त करने की अनुमति देती है। एक साथ दो छायाओं के साथ स्टाइल करना, अधिक यथार्थवादी और देखने में आकर्षक प्रभाव प्रदान करता है।