सीएसएस ड्रॉप शैडो इफ़ेक्ट

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

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

शुरुआत करने के लिए, मैं आपको याद दिलाता हूं कि छवियों के लिए एक डबल / कस्टम फ्रेम बनाने के लिए, आपको छवि के लिए 1px की एक इंडेंट चौड़ाई निर्धारित करने की आवश्यकता है और इसे रंग और मोटाई मापदंडों के साथ सीमा पर सेट करें, या कंटेनर में छवि डालें और कंटेनर के लिए इंडेंट और पृष्ठभूमि छवि सेट करें।

इस मामले में, सब कुछ सरल है। आपको चार और पृष्ठभूमि के बजाय सिर्फ दो तरफ से तस्वीर के लिए पैडिंग और बॉर्डर सेट करना होगा। उदाहरण के लिए, इस तरह:

  .शादो {
 बॉर्डर-बॉटम: 2 पीएक्स सॉलिड #eee;
 बॉर्डर-राइट: 2 पीएक्स सॉलिड #eee;
 पैडिंग-बॉटम: 2 पीएक्स;
 पैडिंग-राइट: 2 पीएक्स;
 पृष्ठभूमि: #ccc;
 } 

यहाँ एक उदाहरण है:



मुझे यकीन नहीं है कि तस्वीर में एक सफेद पृष्ठभूमि के साथ यह जैसा दिखता है वैसा ही होना चाहिए, लेकिन फिर भी :)

समान सफलता के साथ, आप पृष्ठभूमि की छवि सेट करके और इसकी स्थिति के साथ खेलकर ऐसा कर सकते हैं।

स्वाभाविक रूप से, वांछित प्रभाव को प्राप्त करने के लिए प्रयोग करना संभव और आवश्यक है, लेकिन सार स्पष्ट है।

इंटरनेट एक्सप्लोरर में PS इन क्विरक्स मोड में img के लिए 6 पैडिंग काम नहीं करेगा, लेकिन यदि आप अभी भी क्विरक्स मोड में काम करते हैं, तो यह आपकी समस्या है :)