Filtros CSS
Posteado Por CatrianLos filtros CSS son una funcionalidad que permite modificar varias propiedades de los elementos del DOM. Aunque no funcionan del todo en Internet Explorer (nada nuevo…), son una herramienta muy interesante al momento de manipular elementos sin necesidad de recurrir a herramientas como Photoshop o Fireworks.
Hay muchos filtros de donde escoger como: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate e invert. La mayoría de las propiedades tiene valores entre 0 y 1, con algunas excepciones. La propiedad blur usa valores en pixeles y puede ser cualquier número entero y la propiedad hue-rotate usa valores como número entero y unidad en grados (deg).
El siguiente código aplica la el filtro blur a un elemento
1 | .elemento { -webkit-filter: blur(2px); } |
Los filtros se pueden encadenar para un mismo elemento de la siguiente forma:
1 | .elemento { -webkit-filter: blur(2px) grayscale(.5) opacity(0.8) hue-rotate(120deg); } |
El uso de filtros agrega una carga sustancial en el rendimiento del sitio web por lo que es recomendable hacer testados extensivos una vez aplicados.
