Weltkarte CSS-Vorlagen

Anpassbare Weltkarten-CSS-Vorlagen mit Regions- und Markierungs-Styling

Stellen Sie sich eine Weltkarte vor, auf der die von Ihnen betreuten Länder im Türkis Ihrer Marke leuchten, die restlichen in einem blassen Grau verblassen und jede Stecknadel eines Büros leicht anwächst, wenn der Mauszeiger darüberfährt. Weltkarten-CSS-Vorlagen geben Ihnen die Kontrolle über diese visuelle Ebene – von Füllungen und Beschriftungspositionen bis hin zu den Zuständen, die eine Markierung durchläuft. Da die Regeln geteilt werden, wirkt sich eine einzige Änderung der Hervorhebungsfarbe auf jedes abgedeckte Land aus.

Hover- und Aktiv-Zustände von Markierungen

Markierungen sind das, was Besucher auf einer Weltkarte tatsächlich bedienen. Eine Stecknadel, die den Cursor ignoriert, wirkt fehlerhaft, und eine, die zu weit springt, wirkt minderwertig. Die meisten Weltkarten-Layouts stützen sich auf eine Handvoll visueller Regeln:

• ein Hover-Zustand, der eine Stecknadel vergrößert oder einen weichen Schatten darunter einfügt
• ein aktiver Zustand, der das ausgewählte Büro nach einem Klick hervorgehoben lässt
• Füll- und Konturfarben für abgedeckte Länder, wenn die Karte eine SVG mit separaten Formen ist
• Tooltip-Karten mit eigenem Hintergrund, Innenabstand und abgerundeten Ecken

Eine weiße Beschriftung, die über dem Atlantik gut lesbar ist, kann über der hellen Sahara verschwinden. Ein feiner Textschatten oder eine halbtransparente Unterlegfläche behebt dies in der Regel besser als eine größere Schrift.

Legenden mit gut lesbaren Beschriftungen

Eine Legende verleiht Kartenfarben Bedeutung, aber nur, wenn ihre Farbfelder exakt mit der Karte übereinstimmen. Geteilte Klassen und Farbvariablen ermöglichen es einem einzigen Wert, sowohl die Füllung des Landes als auch das passende Quadrat in der Legende zu steuern. Beschriftungen sind anspruchsvoller, da kleine karibische oder balkanische Länder keinen Platz für Text innerhalb ihrer Grenzen lassen. Eine gängige Lösung besteht darin, diese Beschriftungen mit einer feinen Verbindungslinie außerhalb der Form zu platzieren oder sie bei geringeren Bildschirmbreiten auszublenden. Neben der Karte hält ein Grid-Layout die Legendenspalte ausgerichtet, wobei ein einzelner Abstandswert die Abstände dazwischen festlegt.

Stecknadeln an jedem Breakpoint skalieren

Eine Weltkarte verliert auf einem aufrecht gehaltenen Smartphone den Großteil ihrer Breite, während Fingerkuppen keineswegs schrumpfen. Breakpoints reagieren mit größeren Touch-Bereichen, weniger Beschriftungen und einer Legende, die unter die Karte wandert. Relative Einheiten halten die Markierungsgrößen über verschiedene Geräte hinweg proportional, sodass eine Stecknadel auf einem Laptop nicht wie ein Punkt und auf einem Tablet wie eine Münze aussieht.

Kartenansichten enthalten oft Styles, die sonst nirgendwo im Projekt verwendet werden. Nicepage dokumentiert Minimales CSS pro Seite exportieren als optionalen Exportmodus, der ein separates Stylesheet mit genau den Regeln erstellt, die eine Seite benötigt – so bleibt umfangreiches Karten-Styling vom Rest der Website getrennt.

Fahren Sie mit dem Mauszeiger über einige Stecknadeln, vergleichen Sie die Legende mit den Füllungen und betrachten Sie das Layout in Smartphone-Breite. Diese Prüfungen verraten mehr über eine Weltkarten-CSS-Vorlage als jeder Screenshot.