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

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

Зеленый

.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
.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
48892

Комментарии

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

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

Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
46165
+12
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
42668
+15
Таблица HTML цветов
Все стандартные цвета - их названия, HEX коды и RGB значения.
293542
+50
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
21569
+10
Преобразование цветов в PHP
Несколько примеров как перевести цвета из HEX в RGB и обратно с помощью PHP.
12084
0
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
37067
+18