Como convertir imágenes en blanco y negro, CSS

Css blanco y negro

En este caso tenemos un código muy sencillo. Esta es una linea que suelo usar para slider como marcas o proveedores que no siguen el mismo patrón de colores de la web y queremos que no quede como un pegote.

De esta manera obtenemos una semejanza cromática. Con el siguiente código convertimos la imagen a blanco y negro con una escala de grises:

img {
    filter: grayscale(100%);
}

Y como detalle me suele gustar que al pasar por encima si que se vean los colores originales por lo que añadimos esta linea.

img:hover {
    filter: none;
}

Sencillo y practico.

Compartir

Otros post

Escapa de QDQ

Escapa de QDQ

Descubre porque deberías escapar de webs hechas por QDQ y pasa a un mejor diseño.

Mejora tus url's en woocommerce

Mejora tus url’s en woocommerce

Que las url’s de tu sitio web sean entendibles, puede ser un factor importante para el SEO de tu tienda. ¿Quieres mejorar los enlaces de tu woocommerce?

Primer proyecto angular

Primer proyecto Angular

Después de seguir los pasos de instalación, ya tenemos instalado todo lo necesario para comenzar nuestro primer proyecto con Angular, así que para crearemos una

¿Quién eres?