-webkit-box-reflect in firefox e IE - CSS

Sono ancora nuovo in Reflections in CSS e così via, quindi ho qualche problema con questo. Per la home page mi è stato detto che ho bisogno di riflettere il testo e quindi un'immagine (oltre a un'ombra complicata dietro ma è nella mia lista di cose da fare).-webkit-box-reflect in firefox e IE - CSS

Per cromo/Safari (WebKit) Io ho

-webkit-box-riflettere: sotto 0px -webkit-gradiente (lineare, in alto a sinistra, in basso a sinistra, da (trasparente), colore-stop (70%, trasparente), a (rgba (255,255,255,0.2)));

Sembra molto bello ... Tuttavia ... ovviamente funziona solo con chrome/safari. Come potrei ottenere lo stesso effetto in Internet Explorer (7/8/9 se possibile) e Firefox?

Grazie, Nicholas Carter

fonte

2012-09-22 Nicholas-c

Forse è possibile fornire un jQuery fallback con this plugin.

Questo tutorial parla anche di cross-browser reflection.

di indirizzare i browser che non supportano riflessioni è possibile utilizzare Modernizr.

Questa versione: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes aggiunge una classe no-cssreflections al tag della pagina <html>.

Quindi, è possibile aggiungere una specifica regola CSS:

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

o tramite JavaScript:

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

fonte

2012-09-22 16:31:30 Giona

si consiglia di utilizzare l'attributo -moz-element per firefox ..

Per riflessione lo farà 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

fonte

2012-09-22 16:34:21

-webkit-box-reflect in firefox e IE - CSS

risposta

Problemi correlati