Ajuste de imagen con efectos de filtro CSS
Ajuste de imagen Brillo y Contraste, o convirtiendo la imagen en Escala de grises o Sefia Es una característica común que puede encontrar en la aplicación de edición de imágenes, como Photoshop. Pero ahora es posible agregar los mismos efectos a las imágenes web usando CSS.
Esta capacidad proviene de los Efectos de filtro que en realidad aún se encuentran en la etapa Borrador de trabajo. Sin embargo, el navegador Webkit parece ser un paso importante en la implementación de esta función..
Entonces, intentémoslo y usaremos esta imagen de Mehdi Kh para demostrar los efectos..
Los efectos
La aplicación de los efectos es muy fácil. Eche un vistazo al fragmento de abajo, para convertir imágenes en escala de grises;
img -webkit-filter: escala de grises (100%);
... y esto es para sepia ala Instagram.
img -webkit-filter: sepia (100%);
Ambos sepia y el escala de grises los valores se expresan en porcentaje donde 100% es el máximo y aplicando 0% mantendrá la imagen sin cambiar, pero cuando el valor no se especifique explícitamente, la 100% será tomado como el predeterminado.
También es posible iluminar la imagen, y podemos hacerlo utilizando el brillo función, como sigue;
img -webkit-filter: brillo (50%);
El efecto de brillo funciona como el contraste y el efecto sepia sobre el valor de 0% Mantendrá la imagen como está y aplicando. 100% iluminará totalmente la imagen, lo que posiblemente muestre solo una página en blanco en blanco en lugar de una imagen.
El efecto de brillo también. permite valores negativos, en el que lo hará oscurecer la imagen.
img -webkit-filter: brillo (-50%);
... y podemos ajustar el contraste de la imagen de esta manera.
img -webkit-filter: contraste (200%);
Hay una pequeña diferencia en cómo funciona el valor también, como se puede ver en lo anterior, establecemos la contraste() por 200%, esto se debe a que el valor de 100% es el punto de partida donde la imagen permanecerá sin cambios. Cuando el valor está por debajo 100%, Digamos que el 50%, la imagen será menos contrastada..
Además, también podemos combinar el efecto en un bloque de declaración, como en el siguiente ejemplo. Convertimos la imagen en escala de grises y aumentar la contraste al 50% al mismo tiempo.
img -webkit-filter: contraste en escala de grises (100%) (150%);
Al combinar el filtro con la transición a CSS3 podemos hacer una graciosa flotar efecto.
img: hover -webkit-filter: escala de grises (0%); img: flotar -webkit-filter: sepia (0%); img: flotar -webkit-filter: brillo (0%); img: flotar -webkit-filter: contraste (100%);
Por último, hay un efecto más que podemos probar; la Desenfoque gaussiano, lo que desdibujará el elemento apuntado.
img: hover -webkit-filter: blur (5px);
Al igual que en Photoshop, el valor de desenfoque se establece en el radio de píxeles y si el valor no se establece explícitamente, se tomará el 0 como predeterminado y la imagen se dejará como está.
Pensamiento final
En realidad, hay muchos más efectos en la especificación. como hue-rotate, invertir y saturar, Pero creo que se aplican menos en casos reales de la web. Así, la discusión se limitó a solo cuatro efectos..
Y, a pesar de que la discusión se aplica a las imágenes en este tutorial, la propiedad también se puede aplicar a cualquier elemento en el DOM.
Por último, puede ver la demostración en vivo de estos enlaces a continuación. Tenga en cuenta que el filtro actualmente solo es compatible en Cromo 19 y por encima.
- Manifestación
- Descargar fuente
