CSS: преобразование цветного изображения в чернобелое

Сабж под катом

.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 сильно не напрыгаешься;
  • подогнать разные картинки в один оттенок серого довольно сложно.

Например:

breitling.com breitling.com
6pm.com 6pm.com
bestbuy.com bestbuy.com
bjs.com bjs.com

Объясню для тех кто не понял: не для кого не секрет, что css и html это не фотошоп, и изменить серость, желтого и красного и уж тем более черного, особого метода нету (ну кто-то пытался это сделать через opacity но результат был не особо успешным). В результате добрый дизайнер мог это все подвинуть в оттенках серого и уж тогда этот css вам ни как не поможет. И как не старайся потом решение чаще всего только одно — спрайт.

Рубрикиcss

Добавить комментарий

Ваш адрес email не будет опубликован.