Черно-белая карта Яндекс

В последнее время очень популярным у дизайнеров является изображение карты (особенно из сервиса Яндекс.Карты) под каким-нибудь фильтром - при этом они требуют, чтобы с картой можно было работать - то есть наложение какого-нибудь цветного слоя или карта-картинка точно не годятся. Поэтому сегодня мы научимся делать черно-белую карту. Поехали?

Для этого мы будем использовать css 3 свойство filter - grayscale. Поддержка слабая, но с помощью префиксного написания можно добиться более-менее кроссбраузерного отображения. Для того, чтобы сделать нашу карту черно-белой (или вообще любую картинку или элемент), пишем следующие стили:

.ymaps-2-1-34-map {
  filter: url("data:image/svg+xml;utf8,<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>#grayscale");
  /* Firefox 3.5+ */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  filter: grayscale(100%);
}

Вот и все. Поэкспериментировать и познакомиться со списком возможных фильтров можно по ссылке. Всем успехов.