Convertir una imagen en blanco y negro a color con un fundido, usando CSS

 En Utilities

Con la evolución de los lenguajes de programación, el diseño de las paginas web ha adquirido mayor grado de complejidad, combinando la experiencia de usuario a un contenido de calidad. Aplicando con ponderación algunos elementos, se puede conseguir un “efecto wow!” con relativa facilidad. La estructura por módulos del CSS3 permite crear un amplio abanico de efectos: tomemos por ejemplo a estos coloridos nahuales que fotografíe hace unos años en un mercadillo de México, a los que aplicaremos un filtro para que se muestren por defecto en blanco y negro, y cuando se pasa el cursor encima, aparezcan en color.

Primero tenemos que definir en nuestra hoja de estilo style.css (o similar) la clase que mostrará el efecto deseado y cuándo se tiene que mostrar: en este caso en un hover, es decir, cuando el cursor del ratón pasa encima de la imagen. Se tiene que especificar para la clase img.grayscale unos valores de filtro (dependiendo de los diferentes navegadores), así como los diferentes parámetros de transición: tiempo y efecto.

A continuación, el img.grayscale:hover define qué ocurre cuando el cursor pasa encima de la imagen: desaparece el filtro de escala de grises definido previamente.
img.grayscale {
filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10 */
filter: gray; /*IE6-9*/
-webkit-filter: grayscale(100%); /*Chrome 19+ & Safari 6+*/
-webkit-transition: all 1.5s ease; /*Fade to color for Chrome and Safari*/
-moz-transition: all 1.5s ease;
-webkit-backface-visibility: hidden; /*Fix for transition flickering*/
width: 100%;
height: 100%;
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

Una vez definida la clase grayscale, sólo se tiene que aplicar a las imágenes que queremos ver con este efecto, bien en HTML, bien en el PHP. Por ejemplo, en el caso de la imagen a continuación, basta con añadirla a las clases ya existentes:

<img src="http://devargas.com.es/wp-content/uploads/2013-11-10_blanco-negro-color-css-rollover.jpg" class="alignnone grayscale size-full wp-image-7778" />

Convertir una imagen en blanco y negro a color con un fundido, usando CSS

Los diferentes parámetros de transition-timing-function que fija el efecto de transición gradual son los siguientes:

Valores Descripción
linear Efecto de transición con la misma velocidad de inicio a fin (equivalente a cubic-bezier(0,0,1,1))
ease Efecto de transición con inicio lento, luego rápido y fin lento
(equivalente a cubic-bezier(0.25,0.1,0.25,1))
ease-in Efecto de transición con inicio lento (equivalente a cubic-bezier(0.42,0,1,1))
ease-out Efecto de transición con fin lento (equivalente a cubic-bezier(0,0,0.58,1))
ease-in-out Efecto de transición con inicio y fin lento (equivalente a cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) Para definir valores personalizado de la función cubic-bezier.
Los valores son numéricos y están comprendidos entre 0 y 1

En cuanto a compatibilidad en los principales navegadores (Chrome, Firefox, Safari, Opera, Internet Explorer), hay que tener en cuenta que los efectos de transición todavía no siempre funcionan como cabe esperar, que sea en ordenadores de escritorio, tablets o móviles. A pesar de lo que se recoge en esta tabla de compatibilidad para filtros y en la de efectos en CSS3, he podido comprobar que en Safari para Windows no funciona en absoluto dado que Apple ya no actualiza su versión de navegador (para iOS funciona perfecto), y en IE y Firefox funciona parcialmente –no se aplica el efecto de transición gradual: la imagen pasa directamente de escala de grises a color.

Fuentes: W3Schools, jsFiddle, PasteBin

Entradas recomendadas
Showing 2 comments

Dejar un comentario

Empieza a escribir y pulse Intro para buscar