1. घर
  2. सवाल और जवाब
  3. -webkit-box-firefox और IE में प्रतिबिंबित - सीएसएस

-webkit-box-firefox और IE में प्रतिबिंबित - सीएसएस

2012-09-22 11 views
5

मैं अभी भी सीएसएस में प्रतिबिंबों के लिए नया हूं और इसलिए, इसके साथ कुछ समस्याएं हैं। होम पेज के लिए मुझे बताया गया है कि मुझे पाठ को प्रतिबिंबित करने की आवश्यकता है और फिर एक छवि (साथ ही साथ एक जटिल छाया है लेकिन यह मेरी टू-डू सूची पर है)।-webkit-box-firefox और IE में प्रतिबिंबित - सीएसएस

क्रोम के लिए/Safari (WebKit) मैं

मिल गया है

-webkit-बॉक्स को प्रतिबिंबित: 0px -webkit-ढाल से नीचे (रेखीय बाईं ओर के ऊपरी बाएं, नीचे, (पारदर्शी), रंग-स्टॉप से (70%, पारदर्शी), से (आरजीबीए (255,255,255,0.2)));

बहुत अच्छा लगता है ... हालांकि ... जाहिर है यह केवल क्रोम/सफारी के साथ काम करता है। इंटरनेट एक्सप्लोरर (7/8/9 यदि संभव हो तो) और फ़ायरफ़ॉक्स में एक ही प्रभाव प्राप्त करने के बारे में मैं कैसे जाउंगा?

धन्यवाद, निकोलस कार्टर

स्रोत

2012-09-22 Nicholas-c

उत्तर

2

हो सकता है कि आप प्रदान एक jQuery this plugin साथ वापस आने कर सकते हैं।

यह ट्यूटोरियल cross-browser reflection के बारे में भी बात करता है।

ब्राउज़र को लक्ष्य करने के लिए विचार का समर्थन नहीं आप Modernizr उपयोग कर सकते हैं।

यह बिल्ड: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes आपके पृष्ठ <html> टैग पर no-cssreflections कक्षा जोड़ देगा।

.no-cssreflections #element-id { 
    /* custom CSS rule */ 
}

या जावास्क्रिप्ट के माध्यम से:

उसके बाद, आप एक विशिष्ट सीएसएस नियम जोड़ सकते हैं प्रतिबिंब के लिए ..

if(!Modernizr.cssreflections){ 
    /* run plugin or whatever */ 
}

स्रोत

2012-09-22 16:31:30 Giona

3

आप Firefox के लिए -moz-element विशेषता का उपयोग करना चाहिए

कहीं भी होगी हो:

#reflection { 
    /* It's a copy of the original element... */ 
    background: -moz-element(#reflected-element) 
       bottom left no-repeat; 

    /* ... turned upside down ... */ 
    -moz-transform: scaleY(-1); 

    /* ... with a gradual fade-out effect towards the bottom. */ 
    mask: url(#reflection-mask); 
}

What is -moz-element?

Reference

स्रोत

2012-09-22 16:34:21

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^