प्रश्न: Google मानचित्र पर लंबवत स्क्रॉलबार के बगल में स्थित ड्रॉपशैडो कैसे बनाता है?एचटीएमएल/सीएसएस: Google अपने मानचित्र पर इस ड्रॉप छाया को कैसे बनाता है?
यह एक स्क्रीनशॉट है जो वास्तव में बता रहा है कि मैं किस बारे में बात कर रहा हूं।
यह ब्राउज़र (आईई, फ़ायरफ़ॉक्स, क्रोम) और मंच (विंडोज, मैक, लिनक्स) की परवाह किए बिना हो रहा है।
संभावना है कि यह आपके ब्राउज़र के आधार पर -webkit-box-shadow या -moz-box-shadow है।
EDIT मैंने अभी पृष्ठ की जांच की है, और यह <div> की एक श्रृंखला है जो एक साथ गठबंधन है। पेज स्रोत में <div id="ds-v"> देखें (या किसी प्रकार के डोम इंस्पेक्टर में, क्योंकि यह आसान होगा)। यह संभवतः एक अच्छा प्रभाव पाने के लिए एक साथ रखे गए किसी प्रकार का हैक है, लेकिन मुझे नहीं पता कि यह कितनी आसानी से पुन: उत्पन्न करता है।
यह वास्तव में पांच रेजर-पतली डीआईवी की एक श्रृंखला है, प्रत्येक में कमी होने वाली अस्पष्टता, एक-दूसरे के बगल में खड़ी होती है। आप फायरबग का उपयोग करके और छाया क्षेत्र पर क्लिक करके इसे अपने लिए देख सकते हैं।
आईई 8: उपयोग F12, तीर नियंत्रण का चयन करें, तो तत्व आप में रुचि रखते हैं पर क्लिक करें
इस मामले में, यह 5 divs अतिव्यापी है, 1-5px, सभी चौड़ाई "की एक शैली के साथ। फ़िल्टर: अल्फा (अस्पष्टता = एक्स); अस्पष्टता: 0.x; ", x 10 से 02
आईई में पीएनजी पारदर्शिता प्राप्त करने के लिए 100% विश्वसनीय तकनीकें हैं, और यदि सीमित क्षेत्रों में उपयोग किया जाता है जो बोग नहीं करेंगे ब्राउज़र के नीचे। वे आसानी से एक छोटे पीएनजी का उपयोग कर सकते थे जो इसके लिए लंबवत दोहराता है, लेकिन मेरा अनुमान है कि उन्होंने अतिरिक्त छवि के उपयोग को छोड़ने के लिए डीआईवी का उपयोग किया था। Google मानचित्र वेबसाइट पर यह एक सार्थक अनुकूलन है। किसी भी अन्य वेबसाइट पर इसके लिए 5 divs का उपयोग करने में कोई दिक्कत नहीं होगी, लेकिन यदि आप ओवरले (पक्षों और कोनों के लिए) पर इसका उपयोग करने की योजना बनाते हैं तो एक पीएनजी "स्प्राइट" अधिक लचीला हो सकता है।
नहीं, क्योंकि यह आईई में मौजूद है। हालांकि अच्छा विचार है – BillB