Mapa Świata Szablony CSS

Konfigurowalne szablony CSS mapy świata ze stylizacją regionów i znaczników

Wyobraź sobie mapę świata, na której obsługiwane przez Ciebie kraje świecą w turkusowym kolorze Twojej marki, pozostałe blakną do jasnej szarości, a każda pinezka biura delikatnie powiększa się po najechaniu kursorem. Szablony CSS mapy świata dają Ci pełną kontrolę nad tą warstwą wizualną – od wypełnień i pozycji etykiet po stany, przez które przechodzi znacznik. Ponieważ reguły są wspólne, pojedyncza zmiana koloru wyróżnienia obejmuje każdy obsługiwany kraj.

Stany hover i aktywne znaczników

Znaczniki to elementy, z którymi użytkownicy wchodzą w bezpośrednią interakcję na mapie świata. Pinezka, która ignoruje kursor, sprawia wrażenie uszkodzonej, a taka, która skacze zbyt gwałtownie, wygląda mało profesjonalnie. Większość układów mapy świata opiera się na kilku wizualnych zasadach:

• stan hover, który powiększa pinezkę lub dodaje pod nią miękki cień
• stan aktywny, który pozostawia wybrane biuro wyróżnione po kliknięciu
• kolory wypełnienia i obrysu dla obsługiwanych krajów, gdy mapa jest plikiem SVG z osobnymi kształtami
• karty tooltipów z własnym tłem, marginesem wewnętrznym i zaokrągleniem rogów

Biała etykieta, która jest czytelna nad Atlantykiem, może zniknąć na tle jasnej Sahary. Subtelny cień tekstu lub półprzezroczyste tło zazwyczaj rozwiązują ten problem lepiej niż większy rozmiar czcionki.

Legendy z czytelnymi etykietami

Legenda nadaje znaczenie kolorom mapy, ale tylko wtedy, gdy jej próbki dokładnie odpowiadają barwom na mapie. Współdzielone klasy i zmienne kolorów pozwalają jednej wartości sterować zarówno wypełnieniem kraju, jak i pasującym kwadratem w legendzie. Etykiety bywają trudniejsze, ponieważ małe kraje karaibskie lub bałkańskie nie pozostawiają miejsca na tekst wewnątrz swoich granic. Powszechnym rozwiązaniem jest umieszczenie tych etykiet poza obrysem z cienką linią wskazującą lub ukrycie ich na mniejszych szerokościach. Obok mapy układ Grid dba o wyrównanie kolumny legendy, a pojedyncza wartość odstępu ustala przestrzeń między elementami.

Skalowanie pinezek w każdym punkcie przerwania

Mapa świata traci większość swojej szerokości na pionowo trzymanym telefonie, podczas gdy opuszki palców wcale się nie zmniejszają. Punkty przerwania reagują większymi obszarami dotykowymi, mniejszą liczbą etykiet i legendą, która przesuwa się pod mapę. Jednostki względne utrzymują proporcje rozmiarów znaczników na wszystkich urządzeniach, dzięki czemu pinezka nie wygląda jak kropka na laptopie i jak moneta na tablecie.

Ekrany z mapami często wymagają stylizacji, której nie używa żaden inny element w projekcie. Nicepage opisuje funkcję Eksportuj minimalny CSS dla strony jako opcjonalny tryb eksportu tworzący osobny arkusz stylów zawierający wyłącznie reguły potrzebne danej stronie, dzięki czemu rozbudowane style mapy nie obciążają reszty witryny.

Najedź kursorem na kilka pinezek, porównaj legendę z wypełnieniami i sprawdź układ przy szerokości telefonu. Te testy powiedzą o szablonie CSS mapy świata znacznie więcej niż jakikolwiek zrzut ekranu.