CSS3 छवि प्रतिबिंब [CSS3 युक्तियाँ]
अब तक, हमने कई नई संपत्तियों की चर्चा की है CSS3. इसके अलावा, वास्तव में कुछ अन्य गुण हैं जो वर्तमान में CSS3 के आधिकारिक विनिर्देशों में शामिल नहीं हैं जो कि आजमाने के लायक हैं, जिनमें से एक है बॉक्स को प्रतिबिंबित द्वारा शुरू की गई संपत्ति वेबकिट. यह संपत्ति निर्दिष्ट वस्तुओं पर प्रतिबिंबित कर सकती है.
मूल परावर्तन
मूल कार्यान्वयन काफी सहज है; मान लीजिए, हम वास्तविक वस्तु के नीचे प्रतिबिंब चाहते हैं। हम लिख सकते है:
img -विभक्ति-बॉक्स-प्रतिबिंबित: नीचे;
यह उदाहरण दिखाता है कि हम एक छवि को कैसे दर्शाते हैं नीचे (स्थिति) वस्तु। लेकिन, इस मामले में, हम प्रतिबिंब को भी पकड़ सकते हैं सही, बाएं, तथा ऊपर.
चिंतन ऑफसेट
ओफ़्सेट प्रतिबिंब और वास्तविक वस्तु के बीच की खाई को परिभाषित करने के लिए प्रयोग किया जाता है। कोड स्निपेट नीचे देखें;
img -webkit-box-प्रतिबिंबित: 10px से नीचे;
उपरोक्त कोड में, हमने प्रतिबिंब को वास्तविक वस्तु से अलग कर दिया 10px;
- डेमो देखें
स्नातक के साथ मास्किंग
प्रतिबिंब प्रभाव जो हम आम तौर पर देखते हैं वह तल पर फीका होता है और वास्तविक वस्तु का केवल आधा या उससे कम प्रदर्शित होता है। इस तरह के प्रभाव को दोहराने के लिए, हम आवेदन कर सकते हैं CSS3 के स्नातक वस्तु को मुखौटा करना, जैसे;
-वेबकिट-बॉक्स-प्रतिबिंबित: नीचे 0px -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, पारदर्शी (), से (आरजीबी (250, 250, 250, 0.1)));
यह कोड निम्नलिखित प्रस्तुति में परिणाम देगा;
हम भी उपयोग कर सकते हैं रंग-स्टॉप संक्रमण को नियंत्रित करने और प्रतिबिंब को अच्छा बनाने के लिए:
img webkit-box-प्रतिबिंबित: नीचे 0px -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे से, (पारदर्शी), रंग-रोकें (70%, पारदर्शी), से (rgba (250, 250, 250, 0.1) )));
- डेमो देखें
फ़ायरफ़ॉक्स के लिए विकल्प
यह संपत्ति, हालांकि, फिलहाल केवल वेबकिट ब्राउज़र (मतलब सफारी और क्रोम) में काम कर रही है। फ़ायरफ़ॉक्स में समान प्रभाव देने के लिए, आपको एक और मार्ग की आवश्यकता है: उपयोग करना -moz-तत्व () समारोह। यह फ़ंक्शन अनिवार्य रूप से विशिष्ट HTML तत्वों से सामग्री को उत्पन्न या प्रतिकृति करेगा। आइए निम्नलिखित उदाहरण पर एक नज़र डालें;
हम एक में लिपटे छवि है और, प्रतिबिंब को पकड़ने के लिए, हम उपयोग करेंगे दुर्भाग्य से, अभी भी कोई आसान तरीका नहीं है अच्छा इस अभ्यास का उपयोग करके फ़ायरफ़ॉक्स में प्रतिबिंब प्रभाव। उपरोक्त कोड बस फीका प्रभाव के बिना, प्रतिबिंब बनाएगा.moz-प्रतिबिंबित आईडी;
:बाद छद्म तत्व, निम्नलिखित नुसार; # moz-प्रतिबिंबित: सामग्री: "" के बाद; प्रदर्शन क्षेत्र; बैकग्राउंड: -मोज़-एलिमेंट (# मोज़-रिफ्लेक्ट) नो-रिपीट; चौड़ाई: ऑटो; ऊंचाई: 375px; मार्जिन-बॉटम: 100px; -मोज़-ट्रांसफ़ॉर्म: स्केल (-1);
-moz-परिणत नकारात्मक पैमाने के साथ उत्पन्न वस्तु को उल्टा करने के लिए प्रयोग किया जाता है। यह भी सुनिश्चित करें ऊंचाई वास्तविक वस्तु के लिए पर्याप्त सटीक है ऊंचाई प्रतिबिंब की स्थिति के लिए अनावश्यक अतिरिक्त लाइनों से बचने के लिए.आगे के संदर्भ
