-webkit-box-reflect w firefox i IE - CSS

Nadal nie używam Reflections w CSS i tak dalej, więc mam z tym jakiś problem. Na stronie głównej powiedziano mi, że muszę odzwierciedlić tekst, a następnie obraz (a także skomplikowany cień z tyłu, ale to jest na mojej liście rzeczy do zrobienia).-webkit-box-reflect w firefox i IE - CSS

przypadku chromu/Safari (WebKit) Mam

-webkit skrzynki-odzwierciedlają Poniżej 0 pikseli -webkit gradientowym (liniowego, po lewej stronie u góry, na dole, z (przezroczysty), kolor-stop (70%, przezroczysty), do (rgba (255,255,255,0,2)));

Wygląda bardzo ładnie ... Jednak ... oczywiście działa tylko z chromem/safari. Jak chciałbym uzyskać ten sam efekt w Internet Explorerze (7/8/9, jeśli to możliwe) i Firefox?

Dzięki, Nicholas Carter

Źródło

2012-09-22 Nicholas-c

Może zapewnić jQuery awaryjne z this plugin.

Ten samouczek mówi również o cross-browser reflection.

Aby kierować przeglądarek nie wspiera odbicia można użyć Modernizr.

Ta wersja: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes doda klasę no-cssreflections do strony <html>.

Następnie można dodać konkretną regułę CSS:

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

lub za pośrednictwem javascript:

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

Źródło

2012-09-22 16:31:30 Giona

należy użyć atrybutu -moz-element for Firefox ..

do refleksji, że będzie być:

#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

Źródło

2012-09-22 16:34:21

-webkit-box-reflect w firefox i IE - CSS

Odpowiedz

Powiązane problemy