Изменение цвета Яндекс карт

Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane.
1
.ymaps-layers-pane {
	filter: grayscale(1);
	-ms-filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
}
CSS
2
.ymaps-layers-pane {
	filter: brightness(50%);
	-ms-filter: brightness(50%);
	-webkit-filter: brightness(50%);
	-moz-filter: brightness(50%);   
	-o-filter: brightness(50%);  
}
CSS
3

Зеленый

.ymaps-layers-pane {
	filter: hue-rotate(90deg);  
	-ms-filter: hue-rotate(90deg);
	-webkit-filter: hue-rotate(90deg);
	-moz-filter: hue-rotate(90deg);
	-o-filter: hue-rotate(90deg);
}
CSS

Синий

.ymaps-layers-pane {
	filter: hue-rotate(180deg);
	-ms-filter: hue-rotate(180deg);
	-webkit-filter: hue-rotate(180deg);
	-moz-filter: hue-rotate(180deg);
	-o-filter: hue-rotate(180deg);
}
CSS

Фиолетовый

.ymaps-layers-pane {
	filter: hue-rotate(260deg);
  	-ms-filter: hue-rotate(260deg);
	-webkit-filter: hue-rotate(260deg);
 	-moz-filter: hue-rotate(260deg);
	-o-filter: hue-rotate(260deg);  
}
CSS
4
.ymaps-layers-pane {
	filter: invert(100%);
	-ms-filter: invert(100%);
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
}
CSS
22.06.2018, обновлено 25.09.2019
76812

Комментарии

, чтобы добавить комментарий.

Другие публикации

Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
63009
+15
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
77276
+19
Таблица HTML цветов
Все стандартные цвета - их названия, HEX коды и RGB значения.
705115
+60
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
29152
+12
Преобразование цветов в PHP
Несколько примеров как перевести цвета из HEX в RGB и обратно с помощью PHP.
17284
-1
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
56995
+24