2012-09-22 25 views
5

Hala CSS'deki Yansımalar için yeni ve bu konuda biraz sorun yaşıyorum. Ana sayfa için, metni ve sonra bir yansımayı (arkamda karmaşık bir gölgenin yanı sıra bu benim yapılacaklar listemde) yansıtmam gerektiği söylendi. Ben-webkit-box-yansıtacak firefox ve IE - CSS

var krom için

/safari (webkit)

-webkit-box-yansıtmaktadır: (şeffaf), renk-durağına 0px -webkit-gradyan altında (doğrusal, sol üst, sol alt kısmını, (% 70, şeffaf), (rgba (255,255,255,0,2)));

Çok güzel görünüyor ... Ancak ... kesinlikle sadece krom/safari ile çalışır. Internet explorer'da (mümkünse 7/8/9) ve Firefox'ta aynı etkiyi elde etmek için nasıl giderim?

sayesinde Nicholas Carter

cevap

2

Belki bir jQuery this plugin ile son çare olarak sağlayabilir.

Bu eğitici ayrıca cross-browser reflection hakkında da konuşuyor. Eğer Modernizr kullanabilirsiniz


yansımalarını desteklemeyen tarayıcıları hedeflemek için.

Bu yapı: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes Sayfanıza no-cssreflections sınıfı ekleyecektir <html> etiketi.

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

veya JavaScript aracılığıyla:

Ardından, belirli bir CSS kuralı ekleyebilir yansıması için ..

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

Sen firefox için -moz-element özelliğini kullanmalısınız o olacak be:

#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