Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit.
In Webkit, filters can be applied to map tiles using the following css markup( e.g. .layerTile { ).
-webkit-filter: grayscale(1); /*Older webkit versions of Chrome & Safari */
-webkit-filter: grayscale(100%) /*Chrome & Safari */
-moz-filter: grayscale (100%); /* Mozilla Firefox */
-ms-filter: grayscale(100%); /* IE10+ */
-o-filter: grayscale(100%); /* Opera */
filter: grayscale(100%); /*CSS*/
/* This is for Firefox 3.5+, Firefox Mobile */
filter: <url to svg file>(filters.svg#grayscale);
}
For a detailed explaination of filtering techniques check out Understanding CSS Filter Effects
To learn more about browser support: Can I Use: CSS Filter Effects
