@alterebro

Usando los efectos de filtro que estaban diseñados para funcionar con SVG, junto a la reciente implementación en los navegadores WebKit (Chrome, Safari..) de los CSS Filter Effects y la vieja y propietaria propiedad filter que Microsoft incluia en sus Internet Explorer podemos aplicar de forma casi segura alguno de estos filtros.
Como ejemplo de uso, para modificar la saturación de un elemento aplicandole el modo escala de grises, creariamos un archivo .xml el cual aplicaría el filtro cuando el navegador soporte efectos SVG basandonos en la especificación del W3C filtros SVG.

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

Luego aplicariamos el CSS teniendo en cuenta la referencia al archivo creado anteriormente definiendo el filtro SVG

element {
 filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(1); /* Webkit 18+ */
}
element:hover {
 filter: none;
 -webkit-filter: grayscale(0);
}

Etiquetas: cross browser, css