lunes, 19 de enero de 2015

Tutorial: Cómo dar efecto blanco y negro a tus imágenes con CSS

¡Comparte el tutorial!
Hoy te traigo otro bonito efecto para que lo agregues a tu blog o página web, se trata de un efecto que hace que tus imágenes se vean en blanco y negro, pero al pasar el cursor sobre ella sus colores originales vuelven.


Mira como dar efecto blanco y negro a tus imágenes con CSS aquí.

¿Que necesitamos?

* Un blog o página web.

Dificultad

Fácil

Paso 1:

Antes de pasar al código mira como queda el efecto:



Paso 2:

Ahora si, vamos al código.

Busca en tu plantilla la siguiente linea:
]]></b:skin>

Ahora pega este código antes de esa linea:
.separator {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-moz-transition: all 2s; -webkit-transition: all 2s; transition: all 2s; /* De Color a B/N */
}
.separator:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; /* De B/N a Color */

Puedes modificar el tiempo que tarda el efecto en devolver el color a la imagen y viceversa, para esto modifica las partes en color morado 1s= 1 segundo, 2s= 2 segundos, y así sucesivamente.

Y listo, guarda los cambios y observa el resultado.


Espero te haya gustado este bonito efecto, para darle un toque de diseño a tu blog.

Fin del tutorial
Ayúdanos compartiendo esto
WhatsApp

En este momento hay comentario(s) sobre Tutorial: Cómo dar efecto blanco y negro a tus imágenes con CSS.


En este momento hay 0 comentarios sobre Tutorial: Cómo dar efecto blanco y negro a tus imágenes con CSS.

 
Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.