Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Implemente un efecto de desenfoque o filtro en una imagen usando CSS3

Es muy común tener diferentes efectos de desplazamiento en los elementos HTML, especialmente en las imágenes. El poder de CSS3 y los navegadores modernos han hecho que esto sea fácil de lograr. Los filtros CSS3 son una propiedad poderosa para aplicar filtros a las imágenes, al igual que los filtros de Photoshop. La propiedad CSS de filtro le permite aplicar efectos gráficos como desenfoque, nitidez o cambio de color a un elemento. Los filtros se usan comúnmente para ajustar la representación de imágenes, fondos y bordes. Esta breve publicación muestra cómo aplicar el filtro de desenfoque y la combinación de desenfoque y filtro de escala de grises al pasar el mouse sobre la imagen usando CSS puro.

Marcado HTML

Comencemos creando el marcado HTML. Definir dos etiquetas de imagen con CSS clase blur y blurGrey respectivamente. Estas clases CSS también se aplican a 2 elementos de encabezado H1. Por lo tanto, en caso de que el mouse se desplace sobre la etiqueta o imagen H1, se aplicará el filtro.
La imagen utilizada en esta demostración se toma de FreeImages .

Blur on Hover

Blur and GreyScale on Hover

CSS

La propiedad de filtro acepta una función de filtro integrada o una función personalizada. La función acepta un valor que puede ser en porcentaje o un valor decimal. Para aplicar el filtro de desenfoque, necesitamos pasar una función de desenfoque con algunos valores. En el HTML, uno de los elementos de imagen y elemento H1 tiene una clase de desenfoque CSS. Como queremos aplicar el efecto de desenfoque en el desplazamiento, por lo tanto: se utiliza el selector de desplazamiento. Dentro del selector de desplazamiento, pase un valor decimal o un valor de porcentaje para difuminar la función. Cuanto mayor sea el número, más borroso estaría allí.
.blur {
 -webkit-filter: desenfoque (0);
 filtro: desenfoque (0);
 -webkit-transition: .3s facilidad de entrada;
 transición: .3s facilidad de entrada;
 }
 .blur: hover {
 -webkit-filter: desenfoque (3px);
 filtro: desenfoque (3px);
 }
Las clases CSS anteriores aplicarán el efecto de desenfoque en las imágenes. La propiedad de transición CSS3 le permite cambiar los valores de propiedad sin problemas (de un valor a otro), durante una duración determinada.
También podemos pasar múltiples funciones de filtro separadas por espacio. Esto es necesario cuando se necesitan múltiples efectos. Por ejemplo, para aplicar efectos de desenfoque y escala de grises en la imagen, pase ambos filtros. Me gusta,
.blurGrey {
 -webkit-filter: escala de grises (0) desenfoque (0);
 filtro: escala de grises (0) desenfoque (0);
 -webkit-transition: .3s facilidad de entrada;
 transición: .3s facilidad de entrada;
 }
 .blurGrey: hover {
 -webkit-filter: desenfoque en escala de grises (100%) (3px);
 filtro: escala de grises (100%) desenfoque (3px);
 }
Puede consultar la demostración de trabajo aquí . Hay otras funciones de filtro incorporadas para crear diferentes efectos. A continuación se muestra una lista de todas las funciones de filtro incorporadas para elegir.
• brillo (): para ajustar el brillo.
• contraste (): para ajustar el contraste.
• drop-shadow (): aplica un efecto de sombra paralela.
• hue-rotate (): aplica una rotación de tono en la imagen.
• invert (): invierte las muestras en la imagen.
• opacity (): para manipular la opacidad de la imagen.
• saturate () - Satura la imagen.
• sepia (): aplique un filtro sepia (color marrón rojizo) en la imagen.
• url () - para aplicar filtros SVG

Conclusión

Para resumir, acabamos de aprender cómo aplicar filtros CSS3 para crear un efecto de desenfoque y escala de grises en las imágenes y el elemento de encabezado H1. Los filtros CSS3 son como los filtros de Photoshop y se pueden implementar muy fácilmente con unas pocas líneas de código CSS. También vimos una lista de otras funciones de filtro incorporadas para aplicar diferentes efectos. ¡Que te diviertas!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas