Ya sea que ejecute un portafolio en línea, un sitio web de una página o algún otro tipo de sitio web que funcione con muchas imágenes, con unas pocas líneas de CSS, podemos hacer una cantidad extremadamente sorprendente de manipulación de imágenes agregando filtros de imagen con CSS. : cambio de brillo, alteración de colores, etc.
En realidad, puedes hacer mucho con CSS y es posible que ni siquiera te des cuenta. En este artículo, estoy seguro de que te sorprenderá lo que puedes hacer con imágenes y CSS puro.
Muchos de los ejemplos aquí se basan en simples filtros de imagen (CSS) Afortunadamente, estos son compatibles con todos sus navegadores modernos, pero siempre es importante probarlos para asegurarse de que su caso de uso funcione.
¿Qué es la propiedad del filtro?
La propiedad de filtro nos proporciona una forma de modificar la apariencia de un elemento al agregarle cierto efecto. Por lo general, se utilizan en imágenes, fondos y, a veces, bordes.
Por ejemplo, podemos aplicar un efecto de desenfoque a una imagen, un filtro de blanco y negro o cambiar propiedades como el contraste, la saturación, etc.
¿Cómo aplicar un filtro?
Todo lo que tenemos que hacer es usar el filtrar la propiedad CSS y agregue la función de efecto y los valores para ella.
Por ejemplo:
.image-filter{
filter: hue-rotate(45deg);
}<img class="image-fitler" src="my-image.jpg" alt="Image Filter" />
Filtro de imagen interesante: ejemplos de CSS
Entremos directamente: cada ejemplo aquí presentará la imagen original a la izquierda y la imagen en capas a la derecha, lo que le permitirá comparar el filtro y su efecto. Echa un vistazo a los CodePens para ver cómo funcionan también.
1. Invertir filtro de imagen
filter: invert([<number> | <percentage>]);
El argumento es la cantidad de conversión que desea. Puede especificar un número o porcentaje. Si usa porcentaje, un valor de 100% se invierte completamente, mientras que un valor de 0% deja la entrada sin cambios. Todos los navegadores modernos admiten este filtro.
2. Filtro de imagen en escala de grises
filter: grayscale([<number> | <percentage>]);
Simplemente especifique un número o porcentaje, el valor predeterminado es 1. Si usa porcentaje, un valor de 100% mostrará la imagen en escala de grises, mientras que un valor de 0% dejará la imagen como la original. Todos los navegadores modernos admiten este filtro de imagen CSS.
3. Filtro de imagen saturado
filter: saturate([<number> | <percentage>]);
El filtro toma un número o un porcentaje. Si usa un número, un valor por debajo de ‘1’ desatura la imagen, mientras que un valor por encima de 1 la sobresatura. En este caso, he usado 8 para mostrar un efecto extremo. Todos los navegadores modernos admiten este filtro.
4. Filtro de imagen sepia
filter: sepia([<number> | <percentage>]);
Este filtro de imagen CSS convierte la imagen para darle un aspecto más cálido, más amarillo y marrón, según los colores originales de la propia imagen. Especifique un número o un porcentaje. En este caso, usé un número. Debe estar entre 0 y 1. Todos los navegadores modernos admiten este filtro.
5. Filtro de imagen de opacidad
filter: opacity([<number> | <percentage>]);
Esta función también es similar a la propiedad CSS de opacidad, pero la diferencia con los filtros es que algunos navegadores tendrán habilitada la aceleración de hardware para un mejor rendimiento. Nuevamente, puede usar un número o porcentaje. Usé 0.3. Puede utilizar un valor de 0,5 para establecer una transparencia de imagen del 50 %. Esto podría ser un buen Filtro de imagen de fondo CSS.
6. Filtro de imagen de brillo
filter: brightness([<number> | <percentage>]);
Acepta un número o un porcentaje. El comportamiento es un poco diferente de los filtros anteriores. Un valor inferior al 100 % o 1 oscurece la imagen, mientras que un valor superior al 100 % o 1 la aclara. Si desea una imagen casi negra, establezca un valor cercano al 0% (o 0). Todos los navegadores modernos admiten este filtro. También es un buen filtro CSS para Imágenes de fondo.
7. Filtro de imagen de contraste
filter: contrast([<number> | <percentage>]);
Puede aumentar o disminuir el contraste. Acepta un número o porcentaje. El comportamiento es como el filtro de brillo anterior: un valor por debajo del 100% o 1 disminuye el contraste de la imagen, mientras que un valor por encima del 100% o 1 da más contraste. Todos los navegadores modernos admiten este filtro.
8. Filtro de imagen de rotación de tono
filter: hue-rotate(<angle>);
El argumento es el ángulo que desea usar, por lo que, por ejemplo, otro ángulo puede rotar en tono (405 grados). Una rotación de matiz positiva aumenta el valor de matiz, mientras que una rotación negativa lo disminuye. En este filtro, no hay un valor máximo o mínimo. Todos los navegadores modernos admiten este filtro de imagen (CSS).
9. Filtro de imagen borrosa
filter: blur(<length>);
Crea un efecto también conocido como Suavizado gaussiano. El argumento es la longitud o la cantidad de desenfoque que desea. Cuanto mayor sea el número, mayor será el desenfoque. Considere este filtro CSS para imágenes de fondo. Todos los navegadores modernos admiten este filtro.
10. Filtro de imagen de sombra paralela
filter: drop-shadow(<length>{2,3} <color>?);Funciona utilizando un fondo borroso y dibujado debajo de la imagen.
Este filtro de imagen CSS es muy similar a la propiedad box-shadow, pero la diferencia es que box-shadow crea una sombra detrás de toda la imagen, pero la sombra paralela solo crea una sombra que se ajusta al tamaño de la imagen en sí. Todos los navegadores modernos admiten este filtro.
Efecto adicional: modo Mix-Blend
No es exactamente un filtro de imagen CSS, pero definitivamente otro efecto CSS genial que debes conocer.
Esta propiedad CSS usa la palabra clave mix-blend-mode para permitirle establecer cómo los elementos deben combinarse con el fondo. Esto se usa principalmente con texto y fondos geniales como en nuestro ejemplo.
Hay muchos modos de mezcla diferentes opciones para trabajar y no todos los navegadores admiten esta propiedad sobre los elementos SVG, así que siempre verifique para asegurarse.
Pensamientos finales
Puede ser bastante fácil implementar diferentes efectos de imagen con CSS. Este artículo le muestra qué poco CSS necesita para crear un impacto en estas imágenes.
Los filtros de imagen CSS pueden ser muy útiles cuando usa imágenes grandes como fondos, como en un control deslizante de héroe de imagen grande o en un sitio web de pantalla completa. Agregarán a las imágenes algo que las haga únicas.
Muchas veces también, puede editar el CSS para hacer que el filtro de imagen sea suyo, pruébelo y experimente el código CSS y vea qué sucede.
Su navegador no soporta la etiqueta de vídeo.
Cualquiera que sea su caso de uso, los filtros CSS pueden ayudarlo a crear algo único con poco o ningún esfuerzo. Incluso pueden servirle como una forma de editar imágenes rápidamente en lugar de usar un software externo. ¡Así que no esperes más y empieza a usarlos!
Referencias
Artículos relacionados
Más artículos que te pueden resultar interesantes.
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
