-webkit-box-reflect en firefox y IE - CSS

Todavía soy nuevo en Reflections en CSS, etc., por lo que tengo algún problema con esto. Para la página de inicio me han dicho que necesito reflejar texto y luego una imagen (así como una sombra oculta detrás, pero eso está en mi lista de tareas pendientes).-webkit-box-reflect en firefox y IE - CSS

para Chrome/Safari (webkit) He conseguido

-webkit-box-reflejar: por debajo de 0px -webkit-gradiente (lineal, superior izquierda, inferior izquierda, a partir de (transparente), color-stop (70%, transparente), a (rgba (255,255,255,0.2)));

Se ve muy bien ... Sin embargo ... obviamente solo funciona con cromo/safari. ¿Cómo podría obtener el mismo efecto en Internet Explorer (7/8/9 si es posible) y Firefox?

Gracias, Nicholas Carter

Fuente

2012-09-22 Nicholas-c

tal vez puede proporcionar una jQuery de repliegue con this plugin.

Este tutorial también se refiere al cross-browser reflection.

para apuntar los navegadores que no soportan reflexiones puede utilizar Modernizr.

Esta compilación: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes agregará una clase no-cssreflections a su etiqueta <html> de la página.

A continuación, puede añadir una regla CSS específica:

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

o por medio de JavaScript:

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

Fuente

2012-09-22 16:31:30 Giona

debería utilizar el atributo -moz-element para Firefox ..

Para la reflexión que lo hará ser:

#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

Fuente

2012-09-22 16:34:21

-webkit-box-reflect en firefox y IE - CSS

Respuesta

Cuestiones relacionadas