Сабж под катом
.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
Вот только две проблемы:
- с svg сильно не напрыгаешься;
- подогнать разные картинки в один оттенок серого довольно сложно.
Например:
 |
|
 |
|
 |
|
 |
|
Объясню для тех кто не понял: не для кого не секрет, что css и html это не фотошоп, и изменить серость, желтого и красного и уж тем более черного, особого метода нету (ну кто-то пытался это сделать через opacity но результат был не особо успешным). В результате добрый дизайнер мог это все подвинуть в оттенках серого и уж тогда этот css вам ни как не поможет. И как не старайся потом решение чаще всего только одно — спрайт.