Hacer Pregunta

Conecta

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

preguntó
Web
460 Vistas
1 Respuestas
solucionada

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 ?

por gonzalss (3.730 puntos) en Web

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

por Leonardo-Tadei (227.320 puntos)
seleccionada por

1voto

gonzalss comentado

Pero tendría que importar algun CSS ?

por gonzalss (3.730 puntos)

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

por Leonardo-Tadei (227.320 puntos)

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 ?

por gonzalss (3.730 puntos)

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 Leonardo-Tadei (227.320 puntos)

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta