DesarrolloLibre

Desarrollo Web, Android y mucho más

05-07-2016

En esta entrada veremos cómo aplicar la propiedad webkit-box-reflect para crear reflejos, además, su sintaxis ofrece una cantidad importante de valores los cuales podemos establecer a gusto para cambiar aspectos que van desde la posición, desplazamiento hasta la posibilidad de aplicar máscaras a través de degradados CSS y así crear reflejos.

box-reflect soporte solo para plataformas webkit

Cómo puedes darte cuenta con el nombre de la propiedad en cuestión establecida en esta entrada (webkit-box-reflect) el soporte es solo para los navegadores webkit lo que quiere decir que solo funcionará en los navegadores que emplean la plataforma webkit como lo son: Chrome, Opera y Safari, esto último nos dice que no es una propiedad en lo absoluto soportada por una gran cantidad de navegadores y por lo tanto no es muy recomendable emplearlo para aplicaciones finales pero sí con fines educativos o para experimentar un poco.

La sintaxis de la propiedad webkit-box-reflect en detalle

Como veremos a continuación podemos colocar el reflejo en cualquier de los lados que queramos, incluido abajo, como nos interesa para nuestro ejemplo:

Por ello empleamos la siguiente regla CSS:

-webkit-box-reflect: below;

Aunque para posicionarnos en las distintas posiciones o direcciones tenemos distintos valores que podemos establecer:

-webkit-box-reflect: left para el reflejo a la izquierda

-webkit-box-reflect: right para el reflejo a la derecha

-webkit-box-reflect: above para el reflejo en la parte superior

Estableciendo desplazamientos con la propiedad webkit-box-reflect

Si queremos colocar una separación entre la imagen y el reflejo empleamos la segunda propiedad; por ejemplo, para separarlo unos 80px para cada uno de los ejemplos que vimos anteriormente:

-webkit-box-reflect: above 8px
-webkit-box-reflect: right 8px
-webkit-box-reflect: left 8px
-webkit-box-reflect: below 8px

Aplicando máscaras en la propiedad webkit-box-reflect para obtener reflejos:

Como se indicó en un inicio, se pueden aplicar máscaras o filtros para obtener unos interesantes efectos; en nuestro caso nos interesa obtener una especie de reflejo difuminado de la imagen:

-webkit-box-reflect: below 8px linear-gradient(transparent, white);

Que obviamente se puede aplicar a las distintas posiciones que vimos anteriormente; en general la propiedad webkit-box-reflect es bastante útil al evitar que nosotros realicemos todo este trabajo a mano; el único problema (aparte de que solo funciona en los navegadores con webkit) es que hay que alinear tanto la imagen como el reflejo para que no se rompa con el flujo básico de nuestro documento como verán si estudias un poco el CSS de los ejemplo anteriores.

Enlace de interés

Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Loader cuadrado

Loader cuadrado

Ondas con SVG y CSS

Ondas con SVG y CSS

Algunos artículos que te pueden interesar

¿Cómo crear un carrusel con CSS?

¿Cómo crear un carrusel con CSS?

En esta entrada veremos cómo crear un carrusel con solo CSS, veremos un par de variación más para ejemplificar la versatilidad del código presentado empleando las Animaciones y JavaScript.

Andrés Cruz 21-09-2015

Animando cosas con CSS

Animando cosas con CSS

Muchos cosas se pueden hacer con un poco de CSS y algo de imaginación, en esta entrada veremos algunos experimentos curiosos con animaciones que pueden servir (por ejemplo) como icono para la "Carga de Página" en nuestro site.

Andrés Cruz 22-06-2015

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

En esta entrada veremos como copiar una imagen producto de una captura de pantalla que se encuentre guardada de manera temporal en el portapapeles o clipboard en un elemento img.

Andrés Cruz 29-01-2015