HTML/CSS

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

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

Затемнение

.ymaps-layers-pane {
    filter: brightness(50%);
    -ms-filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);   
    -o-filter: brightness(50%);  
}
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);
}

Синий

.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);
}

Фиолетовый

.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);  
}
4

Инверсия цветов

.ymaps-layers-pane {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
}
22 июня 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.