Imagina que te encuentras en la situación de tener que mostrar imágenes de un sitio web en alto contraste, desenfocadas o con mucho brillo. Antes de los filtros de CSS, tus únicas opciones eran, o bien modificarlas desde algún programa de edición de imagen como Photoshop o Gimp y generar distintas versiones de la imagen, o bien manipular las imágenes desde Javascript.
A no ser que quieras manipular los píxeles originales de la imagen, los filtros de CSS te proporcionan una solución fácil y sencilla. Vamos a empezar este tutorial con una breve discusión sobre todos los filtros disponibles.
Filtro de desenfoque (blur)
Este filtro aplicará un desenfoque gaussiano a tus imágenes. Tendrás que proporcionarle un valor de longitud que determinará el número de píxeles que se mezclarán entre sí. Esto implica que un valor más grande proporcionará una imagen más borrosa. Ten en cuenta que no puedes utilizar porcentajes para determinar el radio de desenfoque. Si no se especificas ningún parámetro, se utilizará el valor 0. La sintaxis correcta para el uso de este filtro es:
filter: blur( longitud )
El filtro blur() no acepta valores negativos.
Filtro de brillo (brightness)
Este filtro aplicará un multiplicador lineal a las imágenes, haciéndolos más intensos o débiles en comparación con las imágenes originales. Acepta un número y un porcentaje como valor. En el 0% obtendrás una imagen completamente negra. En el 100% obtendrás la imagen original sin ningún cambio. Los valores más altos producen imágenes más brillantes. Un valor suficientemente elevado hará que en la imagen aparezca en su mayoría blancos. La sintaxis correcta para usar este filtro es:
filter : brightness( numero o porcentaje )
El filtro brightness() no acepta valores negativos.
Filtro de contraste (contrast)
Este filtro cambia el contraste de las imágenes. Al igual que el filtro de brillo, acepta tanto valores numéricos como valores porcentuales. En el 0% obtendrás una imagen completamente gris. Estableciendo el valor al 100% no obtendrás ningún efecto. Los valores superiores al 100% producirán imágenes de alto contraste. La sintaxis correcta para usar este filtro es:
filter : contrast( numero o porcentaje )
El filtro contrast() no acepta valores negativos.
Sombra paralela (drop-shadow)
Casi todos hemos utilizado las sombras paralelas al menos una vez. El problema de las sombras paralelas es que son en forma de caja. No puedes utilizarlas para crear sombras con formas irregulares. Por otro lado, el filtro de sombra crea sombras alrededor del límite de una imagen. Es básicamente una versión borrosa de la máscara alfa de la imagen de entrada. La sintaxis correcta para utilizar las sombras paralelas es:
filter : drop-shadow( horizontal, vertical, color )
Los dos primeros valores de longitud son obligatorios, y establecen el desplazamiento horizontal y vertical de la sombra. El tercer valor, el radio de desenfoque, es opcional. Un valor más grande creará una sombra más ligera.
Filtro de escala de grises (grayscale)
Este filtro hará que tus imágenes se vean en blanco y negro. Con un valor de 0%, aparecerá la imagen sin cambios, mientras que con un valor del 100% hará que la imagen se vea en blanco y negro por completo. Cualquier valor entre estos dos efectos será un multiplicador lineal sobre este efecto. La sintaxis correcta para usar este filtro es:
filter : grayscale( numero o porcentaje )
El filtro grayscale() no acepta valores negativos.
Rotación de colores (hue-rotate)
Este filtro aplicará un giro de colores en tus imágenes. El parámetro (pasado como un ángulo) determinará el número de grados alrededor del círculo cromático en el cual se transformarán las imágenes. Con un valor de 0 grados, la imagen final no se verá afectada. Si especificas un valor más allá de los 360deg, el filtro transformará los colores de la imagen. La sintaxis correcta para usar este filtro es:
filter : hue-rotate( angulo )
Filtro de inversión de colores (invert)
Este filtro invertirá los colores de tus imágenes. La cantidad de inversión dependerá del valor del parámetro que le pasamos a la función. Una inversión del 0% no tendrá ningún efecto sobre la imagen. Por otro lado, un valor del 100% invertirá completamente los colores de la imagen. Un valor del 50% producirá una imagen completamente gris. Este filtro no acepta valores negativos. La sintaxis correcta para utilizar el filtro invert() es:
filter : invert( numero o porcentaje )
Filtro de opacidad (opacity)
El filtro de opacidad aplica transparencia a una imagen dada. Un valor del 0% implica que deseas un 0% de opacidad, lo que resulta en una imagen completamente transparente. Del mismo modo, un valor del 100% deriva en una imagen completamente opaca.
El filtro es similar a la propiedad opacity de CSS. La única diferencia es que en este caso, ciertos navegadores pueden proporcionarte una mayor aceleración da la hora del rendimiento. La sintaxis correcta de usar este filtro es:
filter: opacity( numero o porcentaje );
Filtro de saturación (saturate)
Este filtro determina la saturación de las imágenes. La saturación en sí depende del valor del parámetro. No se pueden utilizar valores negativos con este filtro. Con el 0%, el valor mínimo posible, la imagen será completamente insaturada. Con un valor de saturación de 100%, la imagen se mantendrá sin cambios. Para obtener imágenes super-saturadas, tendrás que utilizar valores superiores al 100%. La sintaxis correcta para usar este filtro es:
filter : saturate( numero o porcentaje )
Filtro sepia (sepia)
Este filtro transformará las imágenes originales a un tono sepia. Con un valor del 100% obtendrás una imagen totalmente sepia. Con un valor de 0%, la imagen se mantendrá igual. Todos los demás valores que se encuentran en ese radio serán multiplicadores lineales de este filtro. No está permitido utilizar valores negativos con este filtro. La sintaxis correcta de utilizar el filtro sepia() es:
filter : sepia( numero o porcentaje )
Fuente: Monty Shokeen