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

Цвет карты можно изменить начиная с версии 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
69081

Комментарии

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

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

Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
57854
+14
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
65492
+18
Таблица HTML цветов
Все стандартные цвета - их названия, HEX коды и RGB значения.
607433
+51
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
27247
+12
Преобразование цветов в PHP
Несколько примеров как перевести цвета из HEX в RGB и обратно с помощью PHP.
15795
-1
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
50803
+20