Каждый владелец сайта хочет, чтобы пользователю было представлено нечто запоминающееся. Одним из таких элементов может быть карта с расположением офиса или областью в которой работает компания. Как сделать метку с расположением офиса есть множество статей, как сделать выделение города/области на карте можно почитать тут.
Но что, если хочется поменять цветовую схему карты. Такое возможно, но только для GoogleMaps (хорошая статья по данному вопросу есть на habr.com), Яндекс.Карты к сожалению, такого (надеюсь пока) не предоставляют.
Но тут на помощь нам может прийти такое CCS свойство как filter. Вот значения, которые может принимать данное свойство:
blur() - Значение задается в единицах длины, например px, em. Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0.
brightness() - Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1.
contrast() - Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100%. Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0 до 1, будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками.
drop-shadow() - Фильтр действует подобно свойствам box-shadow и text-shadow. Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное — величина смещения).
grayscale() - Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект.
hue-rotate() - Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg. 0deg — значение по умолчанию, означает отсутствие эффекта.
invert() - Фильтр делает негатив изображения. Значение задается в %. 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity() - Фильтр работает аналогично со свойством opacity, добавляя прозрачность элементу. Отличительная особенность — браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус — фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в %, 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate() - Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в %, так и целым числом, 1 эквивалентно 100%.
sepia() - Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии.
url() - Функция принимает расположение внешнего XML-файла с svg-фильтром, или якорь к фильтру, находящемся в текущем документе.
Данные свойства можно применять только по одному. Но с помощью значение url(), можно задать SVG фильтр, а уже в нем можно применить любое количество фильтров.
Перед использованием посмотрите поддерживает ли Ваш браузер SVG фильтры.
Как это работает:
А теперь наложим еще один фильтр:
Чтобы посмотреть фильтры, которые доступны к использованию в SVG, можно воспользоваться сервисом https://yoksel.github.io/svg-filters/#/, там же можно поиграться и с параметрами фильтров, чтобы увидеть результат работы на лету.
Естественное CSS свойства можно применять не только для карт, но и для обычных HTML элементов. И тут уже все ограничивается Вашей фантазией.
З.Ы. А еще мы пишем много полезной информации в блоге Стократ. Добро пожаловать.
З.З.Ы. Не забывайте ставить лайки и писать комментарии если тема Вам интересна, и вы хотите продолжения.
