Карта Мира CSS шаблоны

Настраиваемые CSS-шаблоны карты мира со стилизацией регионов и маркеров

Представьте карту мира, на которой страны вашего присутствия подсвечены фирменным бирюзовым цветом, остальные приглушены светло-серым, а маркер каждого офиса немного увеличивается при наведении курсора. CSS-шаблоны карты мира дают вам полный контроль над визуальным оформлением: от заливок и положения меток до состояний, через которые проходит маркер. Поскольку правила едины, одно изменение цвета подсветки сразу применяется ко всем охваченным странам.

Состояния наведения и активности маркеров

Маркеры — это то, с чем пользователи взаимодействуют на карте мира в первую очередь. Маркер, который не реагирует на курсор, кажется сломанным, а тот, что смещается слишком резко, выглядит неаккуратно. Большинство макетов карт мира опираются на несколько визуальных правил:

• состояние наведения (hover), которое увеличивает маркер или добавляет мягкую тень под ним
• активное состояние, сохраняющее выбранный офис выделенным после клика
• цвета заливки и контура для обслуживаемых стран, когда карта представляет собой SVG с отдельными фигурами
• карточки всплывающих подсказок с собственным фоном, внутренними отступами и радиусом скругления углов

Белая подпись, которая отлично читается над Атлантическим океаном, может стать невидимой на светлом фоне Сахары. Тонкая тень текста или полупрозрачная подложка обычно решают эту проблему лучше, чем простое увеличение шрифта.

Легенды с читаемыми подписями

Легенда наполняет цвета карты смыслом, но только пока ее образцы в точности совпадают с картой. Общие классы и переменные цветов позволяют одному значению управлять одновременно заливкой страны и соответствующим квадратом в легенде. С текстовыми метками сложнее: маленькие страны Карибского бассейна или Балкан не оставляют места для текста внутри своих границ. Распространенное решение — вынести такие подписи за пределы контура с тонкой линией-выноской или скрыть их на небольших разрешениях экрана. Рядом с картой макет Grid выравнивает колонку легенды, а одно значение gap задает отступ между ними.

Масштабирование маркеров на каждой контрольной точке

На вертикально ориентированном телефоне карта мира теряет большую часть своей ширины, тогда как пальцы пользователя меньше не становятся. Контрольные точки (breakpoints) адаптируют верстку: увеличивают области нажатия, сокращают число меток и переносят легенду под карту. Относительные единицы сохраняют пропорции маркеров на всех экранах, поэтому булавка не выглядит крошечной точкой на ноутбуке и огромной монетой на планшете.

Страницы с картами часто содержат стили, которые больше нигде в проекте не применяются. Nicepage описывает функцию Экспорт минимального CSS для страницы как дополнительный режим экспорта, создающий отдельную таблицу стилей только с необходимыми для страницы правилами, благодаря чему тяжелые стили карты не перегружают остальную часть сайта.

Наведите курсор на несколько меток, сопоставьте легенду с заливками и оцените макет на ширине смартфона. Такие проверки скажут о CSS-шаблоне карты мира гораздо больше, чем любой снимок экрана.