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

В последнее время очень популярным у дизайнеров является изображение карты (особенно из сервиса Яндекс.Карты) под каким-нибудь фильтром - при этом они требуют, чтобы с картой можно было работать - то есть наложение какого-нибудь цветного слоя или карта-картинка точно не годятся. Поэтому сегодня мы научимся делать черно-белую карту. Поехали?
Для этого мы будем использовать 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%); }
Вот и все. Поэкспериментировать и познакомиться со списком возможных фильтров можно по