Cross-Browser CSS Reflexiones, resplandores y desenfoques

Las reflexiones pueden agregar una dimensión interesante a los objetos, dándoles un toque de realismo y dándoles contexto dentro de su entorno. Echemos un vistazo a lograr reflexiones con CSS y examinaremos el desenfoque brillante y el cross-browser para una buena medida también.

Suposiciones

Seguir este tutorial funciona sobre una serie de suposiciones:

Ya sabes tu HTML.
Está familiarizado con los selectores de CSS y CSS2..
Si desea recrear el ejemplo exactamente, debe saber cómo sombra de la caja trabajos. No es la clave de este tutorial, por lo que deberá resolverlo usted mismo. Si necesita una explicación, le sugiero que eche un vistazo a CSS3 frente a Photoshop: esquinas redondeadas y sombras de caja.

Box-reflect vs 'My Method'

Box-reflect es una propiedad de CSS que está destinada precisamente para este propósito: hacer reflexiones. No usaremos cuadro-reflejo y imagen de máscara, porque:

En el momento de escribir ambas propiedades solo son compatibles con webkit (Chrome y Safari).
La implementación está llena de errores por decir lo menos.

Cuando Microsoft introdujo sus efectos de filtro (piense en la era de IE 4, tablas anidadas para el diseño e imágenes para reflexiones), los filtros sucios no se aplicaron a la totalidad de ningún elemento dado. Supongo que utilizaron algún tipo de cuadro de límite desde la esquina superior izquierda hasta la esquina inferior derecha del elemento, lo que tenía sentido, porque, según mi conocimiento, no había una forma de exceder esta caja. Sin embargo, nunca lo corrigieron..

Ahora, en la era de Chrome 17, el webkit ha cometido el mismo error. Imágenes de máscara, la clave para -webkit-box-reflect, haga una especie de instantánea dinámica dentro del cuadro del límite, péguela debajo y cambie su opacidad. Intenté recrear la demo usando -webkit-box-reflect:

No lo he terminado, pero el problema está claro. El ETBR tiene radio del borde y sombra de la caja. El cuadro de sombra es visible dentro, pero no fuera del cuadro de límite.

En mi método, las transformaciones matriciales, la inserción de sombra de cuadro y opacidad reemplazarán a cuadro-reflejo y máscara-imagen. Las limitaciones:

La mayor limitación es que la inserción de sombra de cuadro no hace que el reflejo sea completamente transparente. Es una combinación de transparencia real y falsa que funcionará la mayor parte del tiempo, pero no siempre.
El texto en el ETBR no se ve afectado por el recuadro de sombra. Esto sucede si el color del texto no es el mismo que el color de fondo de la superficie.

Violín | Pantalla completa

El color del texto no se vuelve más oscuro donde el fondo lo hace. Así que parece que no puedes tener un color diferente. y la caja de sombra juntos.

Opciones ...

Mientras estamos en el tema de matrices y reflexiones ...

Usted toma la píldora azul: le muestro cómo recrear la demostración palabra por palabra. Toma la píldora roja. Te mostraré cómo hacer reflejos de cualquier cosa y te diré dónde puedes comprar estos tonos reflectantes a un precio muy interesante..

En pocas palabras; algunos de los siguientes pasos son opcionales, dependiendo de si desea recrear el píxel de demostración por píxel.

Opcional: Preparaciones.

La demostración comienza con una plantilla HTML5 ...

index.html

      Reflexiones CSS3

... y este archivo CSS.

style.css

 html altura: 100%;  cuerpo text-align: center; línea de altura: 1; margen: 0; relleno: 0; altura: 100%;  p line-height: 1.2;

Y, por supuesto, agregaremos un enlace a la hoja de estilo:

    Reflexiones CSS!

2D, pero 3D

La demo es 2D. No es un solo elemento 3D. Lo sabemos, pero nuestro objetivo es hacer ellos Creo que construimos esto y luego fotografiamos la vista frontal.

Si queremos que crean que es 3D, debemos determinar cómo se posicionan y giran los objetos en el espacio 3D. La demo tiene un horizonte. El 10% superior es el 'cielo' negro, el otro 90% es un plano 3D falso. El elemento a reflejar (de aquí en adelante en nuestra demostración como ETBR) y el plano es perpendicular entre sí (el ángulo es de 90 °), la reflexión debe ser paralela a la ETBR.

Paso 1: Opcional El plano y el ETBR

El HTML:

   reflexión

El ETBR es un hijo del avión. De esta manera, permanece en la misma posición vista desde el plano y el brillo permanece en el plano..

 cuerpo text-align: center; línea de altura: 1; margen: 0; relleno: 0; color de fondo: # 000; altura: 100%;  p line-height: 1.2;  #plane izquierda: 0; superior: 10%; ancho: 100%; abajo: 0; ancho mínimo: 1080px; min-height: 600px; posición: absoluta; desbordamiento: oculto; overflow-x: visible;

Nota:

El avión tiene una anchura mínima y una altura mínima, por lo que el ETBR está siempre visible.
El desbordamiento-y se establece en oculto, por lo que el brillo del ETBR permanece en el plano. (El cielo debe estar completamente negro).
El avión no tiene un color de fondo, pero obtiene su color del brillo, que no tiene sentido en ningún nivel, pero se ve mejor..

Paso 2: El marcado de reflexión

Localice el objeto (ETBR), cópielo, péguelo dentro de sí mismo y cambie su nombre a refl (ection):

 reflexiónreflexión

Ahora dentro del css crea el selector del objeto. Agregue #refl en el selector para que nuestros estilos se apliquen a ambos elementos:

 #ETBR, #refl

Básicamente, el CSS y el HTML de la reflexión deben ser los mismos que el CSS y el HTML del ETBR. Posicionaremos, reflejaremos y simularemos el reflejo del paso 5. Pero, por el momento, ocultaremos el reflejo..

 #ETBR, #refl  #refl mostrar: ninguno;

Internet Explorer es Internet Explorer, tenemos que agregar algunos HTML condicionales:

      Reflexiones CSS3              reflexiónreflexión

Usted podría preguntarse por qué, simplemente desnudo conmigo. Debido a que estás hospitalizado, este primer Fiddle será completamente negro. ¿Quieres ver la influencia del avión? Cambiar el tamaño.

Violín | Pantalla completa

Paso 3: Estilo Básico Opcional

Esto no necesita explicación:

 #ETBR, #refl color: # 004; Familia tipográfica: Impact, 'Arial Black', Helvetica, Arial, sans-serif; transformación de texto: mayúsculas; tamaño de fuente: 200px; color de fondo: #FFE; font-weight: negrita; relleno: 30px; pantalla: bloque en línea;  #refl mostrar: ninguno;

OK, una pequeña explicación. La combinación de text-align: center; y pantalla: bloque en línea; centra un elemento vieja escuela, pero no es el santo grial; los elementos en línea no pueden contener elementos de bloque. Lo usé, porque no quería agregar miles de contenedores flotantes para este ejemplo. En general, sin embargo, este es el camino a seguir..

Violín | Pantalla completa

Paso 4: Esquinas redondeadas opcionales y brillo

El brillo consiste en tres sombras: una sombra grande y estirada (que se parece más al reflejo de la luz en el plano), el brillo real (una sombra blanca con un rango de desenfoque más corto) y una sombra negra insertada (lo que hace que ETBR parece que está brillando). Como mencioné antes, no voy a explicar cómo funciona la sombra de caja y el radio de la frontera por sí mismo en estos días..

 #ETBR, #refl color: # 004; Familia tipográfica: Impact, 'Arial Black', Helvetica, Arial, sans-serif; transformación de texto: mayúsculas; tamaño de fuente: 200px; color de fondo: #FFE; font-weight: negrita; relleno: 30px; pantalla: bloque en línea; cuadro de sombra: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, recuadro rgba (0,0,0, .8) 0 0 20px; radio del borde: 30px;

Violín | Pantalla completa

Paso 5: Posicionamiento de la reflexión

Vacíe el selector #refl para hacer visible el reflejo. Como las reflexiones no son "reales", nuestra reflexión no será parte del flujo de documentos; debe flotar La elección obvia es establecer la posición en absoluta, lo que significa que el elemento está posicionado en relación con su primer elemento ancestral posicionado (no estático). Debido a que no hay un primer antecesor posicionado de la reflexión, se posicionará en relación con la etiqueta del cuerpo.

Es mucho más fácil posicionar la reflexión en relación con el texto real, que también es un antecesor de la reflexión (¿coincidencia?). Para hacerlo, primero tenemos que "posicionar" el ETBR:

 #ETBR, #refl color: # 004; Familia tipográfica: Impact, 'Arial Black', Helvetica, Arial, sans-serif; transformación de texto: mayúsculas; tamaño de fuente: 200px; color de fondo: #FFE; font-weight: negrita; relleno: 30px; pantalla: bloque en línea; cuadro de sombra: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, recuadro rgba (0,0,0, .8) 0 0 20px; radio del borde: 30px; posición: relativa;

Esto no cambia realmente la posición, pero está posicionado. Ahora:

 #refl posición: absoluta; Top 100%; izquierda: 0;

La parte superior de la reflexión es relativa a la altura y posición del ETBR. El 0% les dará la misma punta, el 200% dejará una brecha tan grande como la altura del ETBR y el 100% coloca la parte superior de la reflexión en la parte inferior del ETBR. La izquierda es la misma, pero toma el porcentaje del ancho..

Violín | Pantalla completa

Paso 6: Reflejo moderno, desenfoque y transparencia

Casi todos los navegadores de uso común tienen estas características, desde IE6 hasta Google Chrome. Sin embargo, la implementación es diferente. Los navegadores modernos son muy sencillos para cada característica de una característica: transformar, difuminar y opacidad. Usaremos box-shadow también, pero reflejando primero.

Espejo

 #refl posición: absoluta; Top 100%; izquierda: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1);

Con la transformación podemos modificar un elemento para cada paralelogramo que puedas imaginar. Muchos paralelogramos, lo sé. Pero solo necesitamos reflejar el reflejo, por lo que dejaremos sin utilizar la mayoría de las funciones de transformación..

Cualquier diseñador debe saber que escalar por -1 en el eje Y es lo mismo que reflejar. La escala en el eje Y está multiplicando la distancia entre la parte superior (y la parte inferior) y el centro. Si escalamos en 2 en el eje Y, la distancia de la parte superior al centro será el doble de grande. Si escala por -1, la distancia será la misma, pero arriba es donde estaba la parte inferior y abajo está la parte superior. Enhorabuena, sabes como reflejar.!

Difuminar

Todos los navegadores modernos admitirán filtros muy pronto, -webkit-filter o SVG. FF, Opera e IE10 ya son compatibles con este último, Safari y Chrome solo están aumentando la tensión antes de liberarla. Uno de los filtros SVG es el buen Desenfoque Gaussiano. Es lento, pero es algo ...

Cree un archivo "filter.svg" en la misma carpeta que style.css. Su contenido:

Formalidades, excepto las reglas 6 a 8. El filtro llamado "desenfoque" (puede llamarlo como se llame) difumina 2 píxeles horizontalmente y 3 píxeles verticalmente. Volver a la hoja de estilo!

 #refl posición: absoluta; Top 100%; izquierda: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filter: url (filter.svg # blur); / * FF, IE10 y Opera * / -webkit-filter: blur (2px);

filter.svg # blur significa el elemento 'blur' en filter.svg. Si la ID del filtro fuera 'algo', la url sería filter.svg # cualquier cosa. El radio de desenfoque se define en el archivo SVG. Los navegadores Webkit ponen todo esto en una regla.

Transparencia

La transparencia ha existido por mucho tiempo, por lo que solo tenemos que especificar una propiedad:

 #refl posición: absoluta; Top 100%; izquierda: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filter: url (filter.svg # blur); / * FF, IE10 y Opera * / -webkit-filter: blur (2px); opacidad: .25;

No puedo poner el archivo SVG en el violín. (Debo liderar con el ejemplo para no mezclar la semántica y la presentación. De todos modos, las cosas serían más complicadas ...) Pero no estoy haciendo que la SVG se confunda ...

Violín | Pantalla completa

No esta completo Cuando Apple creó la reflexión en el tercer día, estaba destinada a ser menos reflexiva. La reflexión debe ser menos clara lejos de la superficie. Que haya oscuridad!

Esto solo funciona si la superficie tiene un color sólido y el color de la fuente es similar a este color: lo oscureceremos agregando otra sombra de cuadro. Este cuadro de sombra sobrescribe al anterior en el #ETBR, #refl selector. Contrarrestaremos esto redeclarando la sombra del recuadro del selector anterior. La segunda sombra es la nueva sombra. Recuerda que cada sombra que agregamos al reflejo está reflejada..

 #refl posición: absoluta; Top 100%; izquierda: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filter: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: blur (2px); / * webkit * / opacity: .25; cuadro de sombra: inserción rgba (0,0,0, 0,8) 0 0 20 px, inserción # 000 0 50 px 100 px; / * la primera sombra es vieja * /

La compensación de la segunda sombra es de 50 píxeles, pero el elemento siempre está reflejado después Se aplica la sombra. La sombra no se mueve hacia abajo, se mueve hacia arriba..

Mira esto:

Violín | Pantalla completa

¡Genial! Ahora échale un vistazo con IE8 (o confía en mi palabra): son básicamente dos copias del ETBR una encima de la otra, que no están duplicadas, transparentes o borrosas.

Paso 7: Filtrado sucio

Agregamos algunos comentarios condicionales cuando comenzamos; tres grupos.

Los navegadores modernos y IE10, que no son compatibles con los filtros de IE anteriores (soporte abandonado de IE10), pero sí con los nuevos.
IE8 e inferior, los oldIEs, admiten los filtros sucios y no admiten los nuevos.
IE9, que soporta un poco de ambos.

Si IE9 no fuera compatible con el nuevo material, sería mucho más fácil. (No me malinterpretes, me alegro de que Internet Explorer esté intentando cambiar. Pero sería más fácil ...) Y para hacerlo más complicado, hay diferencias entre los filtros sucios en IE9 e IE8. Basta ya de quejarse, vamos a hacer algo al respecto. Agregue a cada grupo un selector de #reflujo y mueva la propiedad de opacidad a la moderna.

 #refl posición: absoluta; Top 100%; izquierda: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filter: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: blur (2px); / * webkit * / box-shadow: inserción rgba (0,0,0, .8) 0 0 20px, inserción # 000 0 50px 100px;  .modern #refl opacidad: .25;  .ie9 #refl  .oldie #refl

A los filtros sucios no les gusta la opacidad de CSS2. Y hablando de filtros sucios, vamos a usar estos:

DXImageTransform.Microsoft.BasicImage Nos permite reflejar la imagen y cambiar su opacidad.
DXImageTransform.Microsoft.MotionBlur y DXImageTransform.Microsoft.MotionBlur es increíble.
DXImageTransform.Microsoft.Gradient como un reemplazo para la segunda caja de sombra.

Espejo

El primer filtro, BasicImage, en realidad tiene la propiedad "espejo". ¡SÍ! Desafortunadamente, establecer esta propiedad en 1 refleja el contenido horizontalmente, no verticalmente. Pero eso no significa que sea inútil para nosotros. Girar un elemento 180 ° y reflejarlo horizontalmente es lo mismo que reflejarlo verticalmente. Y esto es posible:

 .oldie #refl filter: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2);

Esta rotación no se mide en grados: 0 es 0 °, 1 es 90 °, 2 es 180 ° y 3 es 270 °. Sólo los viejos lo necesitan. IE9 soporta -transformada ms.

Opacidad

Podemos especificar la opacidad en el mismo filtro ...

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacidad = .25);"  .oldie #refl filter: progid: DXImageTransform.Microsoft.BasicImage (espejo = 1, rotación = 2, opacidad = .35);

IE9 (y IE8, pero creo que Internet Explorer ya recibe suficiente atención) admite el filtro -ms. El valor es una cadena grande. Esto crea entendimiento por parte de los otros navegadores (Firefox va a un psiquiatra todos los viernes por Internet Explorer).

Difuminar

... pero necesitamos un nuevo filtro para el desenfoque. Múltiples filtros, si queremos que se vea bien. No comas no filtrar:s entre los filtros, solo un espacio o una nueva linea. -ms-filter ya no tiene nuevas líneas ...

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.Motion (fuerza = 15, dirección = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl filter: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid : DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

Si lo difuminamos una vez con un radio de 6 píxeles, parece que alguien tomó 4 copias del reflejo y movió una de 6 píxeles arriba, una de 6 píxeles abajo, una de 6 píxeles a la izquierda y otra de 6 píxeles a la derecha. Si quieres presumir en el pub, debes saber el nombre: Desenfoque de caja. La adición de iteraciones (difuminando lo borroso) hace que Box Blur aparezca como un desenfoque normal. La segunda iteración es el desenfoque de movimiento, porque se ve bien.

Violín | Pantalla completa

Esta vez, no una, pero dos cosas están mal:

La imagen borrosa movió el reflejo unos pocos píxeles hacia arriba y hacia la derecha en IE9, pero en IE8, movió el reflejo hacia abajo. ¿Por qué? Es un misterio.
En IE7 e IE8, la reflexión es igualmente transparente en todas partes..

Segundo problema primero: como los oldies no son compatibles con box-shadow, usaremos un degradado alfa sucio como reemplazo. Por lo que sé, estos son los primeros valores similares a RGBA en CSS, pero si las especificaciones de w3c decían algo sobre los valores rgba en esos días, Internet Explorer no escuchó. Usaron 8 lugares hexadecimales en lugar de 6. Los dos primeros representan el alfa; los degradados sucios toman ARGB en lugar de RGBA, lo cual, debo admitir, suena mucho mejor:

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.Motion (fuerza = 15, dirección = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (espejo = 1, rotación = 2, opacidad = .35) progid: DXImagen .Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = " falso");

El gradiente también debe estar borroso, así que eso es lo primero. Los degradados de filtro sucios son verticales por defecto. startColorstr es el color degradado en la parte superior y startColorstr El color en la parte inferior, pero se refleja! # 99000000 es lo mismo que rgba (0, 0, 0, 153). Recuerde: cuanto más alta sea la opacidad del gradiente, menor será la opacidad del reflejo..

El posicionamiento es solo una cuestión de prueba y error. Debido a que la reflexión ya tiene su posición establecida en porcentajes, no podemos ajustarla dentro del píxel usando las propiedades izquierda y superior. En su lugar, usaremos el margen:

 .ie9 #refl margin-top: 20px; margen izquierdo: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacidad = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.Motrosoft.MotionBlur (strength = , direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl margin-top: -20px; margen izquierdo: -7px; filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoftflorescarcelzoplatzoplatzopopublicidadcelamiliaparcelopropieñocelopicorcelopicorcelopicorcelopicorcelopiccincadopañolintopotzoproscascoimpiezascontrol.texicocoestoplascoacopiezocelicopetrocidopañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañol. = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

Violín | Pantalla completa

Paso 8: Toques finales

Cambiaremos dos cosas pequeñas antes de que gastes tu tiempo en algo mejor, como ver pandas estornudos en youtube.

Colocar la reflexión más allá de la ETBR (en el espacio z), porque la reflexión borrosa se encuentra sobre la ETBR y sobre el brillo.
Mueva el ETBR hacia abajo. La parte superior del ETBR se alinea perfectamente con el horizonte, que se ve muy extraño.

Las soluciones:

Normalmente, estableceríamos el índice z del ETBR y la reflexión respectivamente en 2 y 1. Pero como no hay otros elementos detrás del reflejo en esta demostración (de nuevo, en el espacio z), simplemente podemos establecer el z Índice de la reflexión a -1..
Añadir relleno a la parte superior del plano. Dado que el ETBR es un hijo del avión, se moverá hacia abajo.

Aquí está el archivo CSS. Los cambios finales se destacan:

style.css

 html altura: 100%;  cuerpo text-align: center; línea de altura: 1; margen: 0; relleno: 0; color de fondo: # 000; altura: 100%;  p line-height: 1.2;  #plane padding-top: 5%; izquierda: 0; superior: 10%; ancho: 100%; abajo: 0; ancho mínimo: 1080px; min-height: 600px; posición: absoluta; desbordamiento: oculto; overflow-x: visible;  #ETBR, #refl color: # 004; Familia tipográfica: Impact, 'Arial Black', Helvetica, Arial, sans-serif; transformación de texto: mayúsculas; tamaño de fuente: 200px; color de fondo: #FFE; font-weight: negrita; relleno: 30px; pantalla: bloque en línea; cuadro de sombra: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, recuadro rgba (0,0,0, .8) 0 0 20px; radio del borde: 30px; posición: relativa;  #refl posición: absoluta; índice z: -1; Top 100%; izquierda: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filter: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: blur (2px); / * webkit * / box-shadow: inserción rgba (0,0,0, .8) 0 0 20px, inserción # 000 0 50px 100px;  .modern #refl opacidad: .25;  .ie9 #refl margin-top: 20px; margen izquierdo: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacidad = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.Motrosoft.MotionBlur (strength =) , direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl margin-top: -20px; margen izquierdo: -7px; filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoftflorescarcelzoplatzoplatzopopublicidadcelamiliaparcelopropieñocelopicorcelopicorcelopicorcelopicorcelopiccincadopañolintopotzoproscascoimpiezascontrol.texicocoestoplascoacopiezocelicopetrocidopañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañónpañol. = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

index.html

      Reflexiones CSS3              reflexiónreflexión

filtro.svg

Conclusión

¡Y eso es todo! Este es el violín final, sin el filtro SVG borroso.

Violín | Pantalla completa

Como algo extra, aquí hay un CSS puro (excepto las estrellas en el fondo) Mac Dock que usa esta técnica.

Espero que hayas disfrutado este tutorial y espero que hayas aprendido algo nuevo. Siéntase libre de dejar cualquier pregunta en los comentarios.!

Diseño web