Mis apuntes de desarrollo web </>

Filtros en CSS

La propiedad filter dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.

Funciones:

Para utilizar filter, hay que especificar un valor para una de las siguientes funciones. Si el valor no es válido, la función se ejecutará de la misma manera que si se le aplicara "none". Las funciones toman un valor en procentaje y también aceptan el valor expresado como decimal.

url():

Toma la dirección de un archivo XML que especifica un filtro SVG, y puede incluir un ancla para un elemento de filtro especifico.

blur():

Aplica un desenfoque Gaussiano a la imagen. El valor de 'radio' define el valor de la desviación estándar de la función de desenfoque Gaussiano o el número de píxeles que se mezclan entre sí, por lo que un valor mayor creará un mayor desenfoque. El valor lagunar de interpolación (es decir, si no se proporciona ningún parametro) es 0. El parámetro se especifica como una longitud, no acepta porcentajes.

brightness():

Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de 0% convertirá la imagen completamente a negro. Un valor de 100% no producirá ningún cambio en la imagen. Otros valores causarán una multiplicación lineal en el efecto. Los valores de una cantidad superior al 100% aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es 1 (equivalente a 100%).

contrast():

Ajusta el contraste del elemento. Un valor superior a 0% creará una imagen completamente gris. Un valor de 100% deja al elemento sin cambios. Valores superiores a 100% son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es 1 (equivalente a 100%).

drop-shadow():

Aplica un efecto de sombra a la imagen. Una sombra es realmente una versión desenfocada y separada de la máscara alfa de la imagen, dibujada en un color particular, debajo de la misma. La función acepta un parámetro de tipo shadow, con la excepción de que la palabra clave ‘inset’ no está permitida. Esta función es similar a la propiedad box-shadow, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento. Los valores para el parámetro shadow son los siguientes:

1. offset-x: Desplazamiento en x (obligatorio).
2. offset-y: Desplazamiento en y (obligatorio).
3. blur-radius: Desenfoque de la sombra.
4. spread-radius: Expansión de la sombra.
5. color: El color de la sombra.

grayscale():

Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente a escala de grises. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de 0.

hue-rotate():

Aplica una rotación de tono al elemento. El valor del ángulo define el número de grados al rededor del círculo de colores al que se ajustarán los colores de la imagen. Un valor de 0deg deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de 0deg. Aunque no hay valor máximo, el efecto de valores encima de 360deg da la vuelta al círculo de colores.

invert():

Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de 100% invierte completamente la imagen. Un valor de 0% deja a la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de 0.

opacity():

Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente transparente. Un valor de 100% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Esto es equivalente a multiplicar las muestras de la imagen por el valor indicado. Si el parámetro no es especificado, se usa un valor de 1. Esta función es similar a la propiedad opacity, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento.

saturate():

Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente sin saturación. Un valor de 100% deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de 100% son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de 1.

sepia():

Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente sepia. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de 0.