🌊 🔲 🤾 CSS3 में तत्वों का क्रॉस-ब्राउज़र प्रतिबिंब 🌪️ 🍛 👨🏿‍🌾

आज, बॉक्स-प्रतिबिंबित और मुखौटा-छवि पहले से मौजूद हैं, जो आपको तत्वों का प्रतिबिंब बनाने की अनुमति देते हैं, लेकिन ये गुण केवल सफारी और क्रोम में उपलब्ध हैं, और वे काम नहीं करते हैं जैसा हम चाहते हैं। इसलिए, मैं आपको सीएसएस में क्रॉस-ब्राउज़र प्रतिबिंब को लागू करने का तरीका बताना चाहता हूं।

HTML डॉक्यूमेंट बनाएं

चलो काम पर लग जाओ। एचटीएमएल कोड लिखकर शुरू करते हैं।

 <!--[if lt IE 9 ]> <body class="oldie"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->

खुद सीएसएस परावर्तन बनाने के लिए, हमें 3 ब्लॉक चाहिए:

 <div id = "plane">
	 <span id = "elrefl"> CSS3 प्रतिबिंब <span id = "refl"> CSS3 प्रतिबिंब </ span> </ span>
 </ Div>

style.css

के लिए शैलियों को लिखने से शुरू करते हैं:

 # हवाई जहाज {
	 पैडिंग-टॉप: 5%;
	 बायां: 0;
	 शीर्ष: 10%;
	 चौड़ाई: 100%;
	 नीचे: 0;
	 स्थिति: निरपेक्ष;
	 अतिप्रवाह: छिपा हुआ;
 }

इस तत्व में कोई पृष्ठभूमि नहीं है, क्योंकि पृष्ठभूमि तत्व के बॉक्स-छाया से बनती है, और अतिप्रवाह संपत्ति को काले रंग में शीर्ष छोड़ने के लिए निर्दिष्ट किया जाता है, जो हमारे प्रतिबिंब को बेहतर दिखने की अनुमति देता है। और अब हम परिलक्षित तत्व और स्वयं प्रतिबिंब तत्व बनाना शुरू करेंगे:

 # लेयरफ्ल, # क्रेफ़ {
	 रंग: # 004;	
	 font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
	 पाठ-परिवर्तन: अपरकेस;
	 फ़ॉन्ट-आकार: 50 पीएक्स;
	 पृष्ठभूमि-रंग: # एफईई;
	 फ़ॉन्ट-वजन: बोल्ड;
	 गद्दी: 30 पीएक्स;
	 प्रदर्शन: इनलाइन-ब्लॉक;	
	 सीमा-त्रिज्या: 30 पीएक्स;
         बॉक्स-छाया: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, इनसेट। 
         rgba (0,0,0, .8) 0 0 20px;
         सीमा-त्रिज्या: 30 पीएक्स;	
	 स्थिति: रिश्तेदार;
       -webkit-user-select: कोई नहीं;
       -मोज़-उपयोगकर्ता-चयन: कोई नहीं;
       -ms-user-select: कोई नहीं;
        उपयोगकर्ता-चयन: कोई नहीं;
 }

 #refl {
	 स्थिति: निरपेक्ष;
	 z- इंडेक्स: -1;	
	 शीर्ष: 100%;
	 बायां: 0;	
	 -वेबकैट-ट्रांसफॉर्म: स्केल (-1);
	 -मोज़-ट्रांसफ़ॉर्म: स्केल (-1);
	 -ओ-परिवर्तन: स्केल (-1);
	 -ms-transform: scaleY (-1);
	 रूपांतर: पैमाना (-1);
  
     / * फ़िल्टर: url (filter.svg # ब्लर);  एफएफ, ओपेरा + IE10 * /
	 -webkit- फ़िल्टर: ब्लर (2px);  / * वेबकिट * /	
	 बॉक्स-छाया: इनसेट आरजीबीए (0,0,0, .8) 0 0 20px, इनसेट # 000 0 50px 100px;
 }

इस स्तर पर, हमने दो बड़े समान बटन बनाए, जिसके बाद हम दूसरे को लंबवत दर्शाते हैं और एक धुंधला जोड़ते हैं। चूंकि मानक धुंधला केवल वेबकिट में उपलब्ध है, इसलिए निम्न कोड के साथ filter.svg बनाएं:

 <? xml संस्करण = "1.0" स्टैंडअलोन = "नहीं"?>
 <svg चौड़ाई = "1" ऊंचाई = "1" संस्करण = "1.1"
 xmlns = "http://www.w3.org/2000/svg"
 xmlns: xlink = "http://www.w3.org/1999/xlink">
   <Defs>
     <फ़िल्टर आईडी = "धुंधला">
       <feGaussianBlur = "SourceGraphic" stdDeviation = "2 3" /> में
     </ फ़िल्टर>
   </ Defs>
 </ एसवीजी>

क्रॉस-ब्राउज़र संगतता

दो चीजें बनी हुई हैं - पारदर्शिता जोड़ने और प्रतिबिंब को क्रॉस-ब्राउज़र बनाने के लिए:

 .Modern #refl {
	 अपारदर्शिता: .25;
 }
 .ie9 #refl।
	 मार्जिन-टॉप: 20 पीएक्स;
	 मार्जिन-लेफ्ट: -10px;	
	 -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (अपारदर्शिता = .25) प्रोगिड: DXImageTransform.Microsoft.Blur (PixelRemius = '3', MakeShadow '' false ') progid: DXImageTransform। Microsoft , दिशा = 0) प्रोगिड: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = 'false'); "
 }
 .oldie #refl।
	 मार्जिन-टॉप: -20px;
	 मार्जिन-बाएं: -7 पीएक्स;	
	 फ़िल्टर: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000)
	 progid: DXImageTransform.Microsoft.BasicImage (दर्पण = 1, रोटेशन = 2, अस्पष्टता = .35)
	 progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = 'false')
	 progid: DXImageTransform.Microsoft.MotionBlur (शक्ति = 15, दिशा = 0)
	 progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = 'false');
 }

परिणाम

यह सब कैसे काम करता है यहां देखा जा सकता है ।

मैं माफी मांगता हूं, मैं एक कामकाजी उदाहरण के लिए एक नया लिंक पोस्ट करता हूं। मैं पिछले लिंक को यह साबित करने के लिए छोड़ देता हूं कि समस्या .svg के कारण है, बस फ़ायरबग में .svg कनेक्शन के साथ लाइन को हटा दें। लोकला पर सब कुछ ठीक ठाक चला। खैर, अब मैंने परिवर्तन में सुधार किया है, लेकिन नए ब्राउज़र के लिए पुराना लिंक भी काम कर रहा है।

उपयोगकर्ता जोड़ा गया: कोई नहीं, उदाहरण के लिए लिंक को अद्यतन किया।

CSS3 में तत्वों का क्रॉस-ब्राउज़र प्रतिबिंब

HTML डॉक्यूमेंट बनाएं

style.css

क्रॉस-ब्राउज़र संगतता

परिणाम

More articles: