entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

imágenes difuminadas o en blanco y negro

Quiero poner unas imágenes con sensación de estar difuminadas o incluso en blanco y negro sin modificar la imagen con photoshop.
¿Existe alguna capa en html ?

1 Respuesta

2votos

Leonardo-Tadei Puntos227320

Hola @gonzalss,

CSS3 incorpora filtros que te permiten hacer estos efectos, en tu caso deberías combiar el fitro de blanco y negro con el de desenfocado (blur) sobre la imagen.

Te dejo un enlace con ejemplos. Recordá que se pueden aplicar varios a la vez.

Saludos cordiales

1voto

gonzalss comentado

Pero tendría que importar algun CSS ?

2votos

Leonardo-Tadei comentado

No hace falta importar un CSS hecho por terceros.

Basta con definir estos estilos para la imagen a la que quieras aplicarlo.

Los filtros CSS son parte de la especificación de CSS3, por lo que todo navegador moderno los implementa.

Saludos

1voto

gonzalss comentado

Con poner esto debajo de los meta

.blur{
-webkit-filter: grayscale(1); /* 1 = 100% */
filter: grayscale(1);
} 

y llamar a la clase cuando muestro la imágen sería suficiente

 <li class="col-md-3">

                  <img class="blur" src="assets/images/clientes/4secMalpartida.jpg" alt="MalPartida " height="100" width="175">

               </li>

¿Me haría falta algo más ?

2votos

Leonardo-Tadei comentado

Hola @gonzalss,

estás usando mal la propiedad CSS.

Para pasar a escala de grises:

.mi-imagen {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Me desorienta que le estés poniendo de nombre a la clase CSS "blur", pero que en la propiedad estés pasando a blanco y negro... hay un filtro específico para hacer desenfoque (blur):

.mi-imagen {
-webkit-filter: blur(3px);
filter: blur(3px);
}

y si quisieras las dos cosas a la vez:

.mi-imagen {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}

luego, aplicar la clase "mi-imagen" al IMG. Naturalmente que podés usar otros nombres de clase...

Saludos

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta