Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Reflejos, brillos y desenfoques CSS entre navegadores

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Los reflejos pueden agregar una dimensión interesante a los objetos, dándoles un toque de realismo y contexto dentro de su entorno. Echemos un vistazo a cómo lograr reflejos con CSS y también examinaremos el brillo y el desenfoque entre navegadores por si acaso.


Suposiciones

Seguir este tutorial funciona con una serie de supuestos:

  • Conoces tu HTML.
  • Estás familiarizado con los selectores CSS y CSS2.
  • Si deseas recrear el ejemplo exactamente, debes saber cómo funciona box-shadow. No es el enfoque de este tutorial, por lo que deberás averiguarlo tú mismo. Si necesitas una explicación, te sugiero que eches un vistazo a CSS3 versus Photoshop: Esquinas redondeadas y sombras en los cuadros.

Box-reflect versus "mi método"

Box-reflect es una propiedad de CSS que está destinada precisamente a este propósito: hacer reflejos. No usaremos box-reflect y mask-image, porque:

  • En el momento de redactar este artículo, ambas propiedades solo son compatibles con webkit (Chrome y Safari).
  • La implementación tiene errores... por decirlo así.

Cuando Microsoft introdujo sus efectos de filtro (piensa en la era de IE 4, tablas anidadas para diseño e imágenes para reflejos), los filtros sucios no se aplicaron a la totalidad de ningún elemento dado. Supongo que usaron algún tipo de cuadro delimitador desde la esquina superior izquierda hasta la esquina inferior derecha del elemento, lo que tenía sentido, porque hasta donde yo sé, no había forma de superar este cuadro. Sin embargo, nunca lo corrigieron.

Ahora, en la era de Chrome 17, webkit ha cometido el mismo error. Enmascarar imágenes, la clave para -webkit-box-reflect, hacer algún tipo de instantánea dinámica dentro del cuadro delimitador, pegarla debajo y cambiar su opacidad. Intenté recrear la demostración usando -webkit-box-reflect:

Naughty reflections...

No lo he terminado, pero el problema está claro. El ETBR tiene border-radius y box-shadow. La sombra del cuadro es visible dentro, pero no fuera del cuadro delimitador.

En mi método de transformaciones matriciales, el box-shadow insertado y la opacidad reemplazarán el reflejo del cuadro y la imagen de máscara. Las limitaciones:

  • La mayor limitación es que el box-shadow insertado 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 ETBR no se ve afectado por el box-shadow. Esto sucede si el color del texto no es el mismo que el color de fondo de la superficie.

Fiddle | Pantalla completa

El color del texto no se oscurece más que el fondo. Entonces parece que no puedes tener un color diferente y un box-shadow juntos.


Opciones...

Ya que estamos en el tema de matrices y reflejos...

Awesome reflections...

Si tomas la píldora azul, te muestro cómo recrear la demostración palabra por palabra. Si tomas la píldora roja, te mostraré cómo hacer reflejos de cualquier cosa y te diré dónde puedes comprar estos tonos reflectantes por un precio muy interesante.

En pocas palabras; algunos de los siguientes pasos son opcionales, dependiendo de si deseas volver a crear la demostración píxel por píxel.


Opcional: Preparativos

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

index.html

... y este archivo CSS.

style.css

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


2D, pero 3D

La demostración es 2D. Ni un solo elemento 3D. Lo sabemos, pero nuestro objetivo es hacerles pensar que lo construimos y luego fotografiamos la vista frontal.

The reflection in 3D...

Si queremos que crean que es 3D, debemos determinar cómo se posicionan y rotan los objetos en el espacio 3D. La demostración tiene un horizonte. El 10% superior es un "cielo" negro, el otro 90% es un plano falso en 3D. El elemento a reflejar (en adelante, en nuestra demostración, ETBR) y el plano son perpendiculares entre sí (el ángulo es de 90°), el reflejo debe ser paralelo al ETBR.


Paso 1: Opcional. El plano y el ETBR

El HTML:

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

Nota:

  • El plano tiene un ancho mínimo y una altura mínima, por lo que el ETBR siempre está visible.
  • El overflow-y está configurado como oculto, por lo que el brillo del ETBR permanece en el plano. (El cielo debe estar completamente oscuro).
  • El plano no tiene un color de fondo, pero obtiene su color del brillo, lo que no tiene sentido en ningún plano, pero se ve mejor.

Paso 2: El marcado del reflejo

Localiza el objeto (ETBR), cópialo, pégalo dentro de sí mismo y cámbiale el nombre por "refl"):

Ahora dentro del CSS crea el selector del objeto. Agrega #refl al selector para que nuestros estilos se apliquen a ambos elementos:

Básicamente, el CSS y el HTML del reflejo debe ser el mismo que el CSS y el HTML del ETBR. Colocaremos, reflejaremos y embelleceremos el reflejo del paso 5. Pero, por el momento, ocultaremos el reflejo.

Para que funcione en Internet Explorer, tenemos que añadir algunos condicionales en el HTML:

Tal vez te preguntes por qué, solo descúbrelo conmigo. Como estás impaciente, este primer Fiddle será completamente negro. ¿Quieres ver la influencia del plano? Cambia su tamaño.

Fiddle | Pantalla completa


Paso 3: Estilo básico opcional

Esto no necesita explicación:

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

Fiddle | Pantalla completa


Paso 4: Opcional. Esquinas redondeadas y resplandor

El resplandor consta de tres sombras: una sombra grande y estirada (que se parece más al reflejo de la luz en el plano), el resplandor real (una sombra blanca con un rango de desenfoque más corto) y una sombra insertada negra (que hace que el ETBR parece que está brillando). Como mencioné antes, no voy a explicar cómo funciona box-shadow y border-radius ya que hablan mucho sobre ellos en estos días.

Fiddle | Pantalla completa


Paso 5: Posicionamiento del reflejo

Vacía el selector #refl para hacer visible el reflejo. Dado que los reflejos no son "reales", nuestro reflejo no será parte del flujo del documento; debería flotar. La opción obvia es establecer la posición en absoluto, lo que significa que el elemento se posiciona en relación con su primer elemento padre posicionado (no estático). Debido a que no hay un antecesor que tenga el reflejo en la primera posición, se colocará en relación con la etiqueta 'body'.

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

En realidad, esto no cambia la posición, pero está posicionado. Ahora:

La parte superior del reflejo es relativa a la altura y la posición del ETBR. El 0% les dará la misma parte superior, el 200% dejará un espacio tan grande como la altura del ETBR y el 100% colocará la parte superior del reflejo en la parte inferior del ETBR. La izquierda es la misma, pero toma el porcentaje del ancho.

Fiddle | 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 una propiedad: transformación, desenfoque y opacidad. También usaremos box-shadow, pero primero hagamos el reflejo.

Reflejo

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

Cualquier diseñador debe saber que la escala de -1 en el eje Y es lo mismo que la duplicación. Escalar en el eje Y es multiplicar la distancia entre la parte superior (e inferior) y el centro. Si escalamos en 2 en el eje Y, la distancia de la parte superior al centro será dos veces mayor. Si escalas en -1, la distancia será la misma, pero la parte superior es donde estaba la parte inferior y la parte inferior es donde estaba la parte superior. ¡Felicitaciones, sabes cómo reflejar!

Desenfoque

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

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

Formalidades, excepto las reglas 6 a 8. El filtro llamado "blur" (puedes llamarlo de cualquier manera) difumina 2 píxeles horizontalmente y 3 píxeles verticalmente. ¡De vuelta a la hoja de estilos!

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

Transparencia

La transparencia existe desde hace mucho más tiempo, por lo que solo tenemos que especificar una propiedad:

No puedo poner el archivo SVG en el 'fiddle'. (Debo predicar con el ejemplo para no poder mezclar semántica y presentación. De todos modos, haría las cosas más complicadas...) Pero no estoy haciendo que el SVG se difumine...

Fiddle | Pantalla completa

No esta completo. Cuando Apple creó el reflejo el tercer día, se pretendía que fuera menos reflexivo. El reflejo debería ser menos claro más lejos de la superficie. ¡Hágase la 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 otro box-shadow. Este box-shadow sobrescribe la anterior en el selector #ETBR, #refl. Contrarrestaremos esto redeclarando la sombra insertada del antiguo selector. La segunda sombra es la nueva sombra. Recuerda que cada sombra que agregamos al reflejo se proyecta.

OffsetY de la segunda sombra es de 50 píxeles, pero el elemento siempre se refleja después de aplicar la sombra. La sombra no se mueve hacia abajo, se mueve hacia arriba.

Echa un vistazo a esto:

Fiddle | Pantalla completa

¡Excelente! Ahora míralo con IE8 (o confía en mi palabra): son básicamente dos copias del ETBR una encima de la otra, que no están reflejadas, transparentes ni borrosas.


Paso 7: Filtrado sucio

Agregamos algunos comentarios condicionales cuando comenzamos; tres grupos.

  • Los navegadores modernos e IE10, que no son compatibles con los antiguos filtros de IE (IE10 eliminó el soporte), pero sí admiten los nuevos.
  • IE8 y versiones inferiores, los antiguos, admiten los filtros sucios y no admiten los nuevos.
  • IE9, soporta un poco de ambos.

Si IE9 no fuera compatible con las novedades, sería mucho más fácil. (No me malinterpretes, estoy feliz de que Internet Explorer esté intentando cambiar. Pero sería más fácil...). Y para hacerlo más complicado, existen diferencias entre filtros sucios en IE9 e IE8. Basta de quejas, hagamos algo al respecto. Agrega para cada grupo un selector #refl y mueve la propiedad de opacidad a 'modern'.

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

  • DXImageTransform.Microsoft.BasicImage nos permite reflejar la imagen y cambiar su opacidad.
  • DXImageTransform.Microsoft.MotionBlur y DXImageTransform.Microsoft.MotionBlur es impresionante.
  • DXImageTransform.Microsoft.Gradient como reemplazo del segundo box-shadow.

Reflejo

El primer filtro, BasicImage, en realidad tiene la propiedad "mirror". ¡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:

Esta rotación no se mide en grados: 0 es 0°, 1 es 90°, 2 es 180° y 3 es 270°. Solo los veteranos necesitan esto. IE9 admite -ms-transform.

Opacidad

Podemos especificar la opacidad en el mismo filtro...

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

Desenfoque

...pero necesitamos un nuevo filtro para el desenfoque. Múltiples filtros, si queremos que se vea bien. Sin comas, sin filter: entre los filtros, sólo un espacio o una nueva línea. -ms-filter ya no consigue nuevas líneas...

Si lo desenfocamos una vez con un radio de 6 píxeles, parece que alguien tomó 4 copias del reflejo y movió una 6 píxeles arriba, una 6 píxeles abajo, una 6 píxeles a la izquierda y una 6 píxeles a la derecha. Si quieres lucirte en el bar, debes saber el nombre: Box Blur. Agregar iteraciones (difuminar el desenfoque) hace que Box Blur parezca un desenfoque normal. La segunda iteración es el desenfoque de movimiento, porque se ve bien.

Fiddle | Pantalla completa

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

  1. El desenfoque movió el reflejo algunos píxeles hacia arriba y hacia la derecha en IE9, pero en IE8, movió el reflejo hacia abajo. ¿Por qué? Es un misterio.
  2. En IE7 e IE8, el reflejo es igualmente transparente en todas partes.

Primero, el segundo problema: debido a que los navegadores antiguos no admiten box-shadow, usaremos un sucio degradado alfa como reemplazo. Estos son, que yo sepa, 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ó. Utilizaron 8 lugares hexadecimales en lugar de 6. Los dos primeros representan el alfa; los degradados sucios toman ARGB en lugar de RGBA, que, debo admitir, suena mucho mejor:

El degradado también debe difuminarse, así que eso es lo primero. Los degradados de filtro sucio 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). Recuerda: cuanto mayor es la opacidad del degradado, menor parece ser la opacidad del reflejo.

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

Fiddle | Pantalla completa


Paso 8: Toques finales

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

  • Colocar el reflejo más allá del ETBR (en el espacio z), porque el reflejo borroso se encuentra por encima del ETBR y por encima del resplandor.
  • Mover 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 z-index del ETBR y la reflexión respectivamente en 2 y 1. Pero debido a que no hay otros elementos detrás de la reflexión en esta demostración (nuevamente, en el espacio z), simplemente podemos establecer el z-index de la reflexión a -1.
  • Agregar relleno a la parte superior del plano. Dado que el ETBR es un hijo del plano, se moverá hacia abajo.

Aquí está el archivo CSS. Los cambios finales están resaltados:

style.css

index.html

filter.svg


Conclusión

¡Y eso es todo! Este es el Fiddle final, sin el desenfoque del filtro SVG.

Fiddle | Pantalla completa

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

Espero que hayas disfrutado de este tutorial y espero que hayas aprendido algo nuevo. ¡No dudes en dejar cualquier pregunta en los comentarios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.