Mappa Del Mondo Modelli CSS

Template CSS di mappe del mondo personalizzabili con stile per regioni e indicatori

Immagina una mappa del mondo in cui i paesi serviti risaltano nel colore verde acqua del tuo brand, gli altri sfumano in un grigio chiaro e ogni puntina di ufficio si ingrandisce leggermente al passaggio del cursore. I template CSS di mappe del mondo offrono il controllo completo su questo livello visivo, dai riempimenti e dalle posizioni delle etichette agli stati che un indicatore attraversa. Poiché le regole sono condivise, una sola modifica al colore di evidenziazione si applica a ogni paese servito.

Stati hover e attivi degli indicatori

Gli indicatori sono gli elementi con cui le persone interagiscono concretamente su una mappa del mondo. Una puntina che ignora il cursore sembra non funzionare, e una che fa uno scatto troppo accentuato appare poco rifinita. La maggior parte dei layout di mappe del mondo si basa su una manciata di regole visive:

• uno stato hover che ingrandisce la puntina o aggiunge una leggera ombreggiatura sottostante
• uno stato attivo che mantiene l'ufficio selezionato evidenziato dopo un clic
• colori di riempimento e tratto per i paesi serviti, quando la mappa è un file SVG con forme separate
• schede tooltip con sfondo, spaziatura interna e raggio degli angoli dedicati

Un'etichetta bianca leggibile sopra l'Atlantico può svanire sui toni chiari del Sahara. Una sottile ombreggiatura del testo o una piastrina di supporto semitrasparente risolvono il problema molto meglio rispetto a un carattere più grande.

Legende con etichette leggibili

Una legenda trasforma i colori della mappa in significato, ma solo se i suoi campioni corrispondono esattamente alla mappa. Classi condivise e variabili di colore consentono a un unico valore di determinare sia il riempimento del paese sia il quadrato corrispondente nella legenda. Le etichette risultano più complesse, poiché i piccoli paesi caraibici o balcanici non lasciano spazio per il testo entro i propri confini. Una soluzione comune consiste nel collocare queste etichette fuori dalla forma con una sottile linea guida, oppure nasconderle a larghezze ridotte. Accanto alla mappa, un layout Grid mantiene allineata la colonna della legenda, con un unico valore di gap che imposta la spaziatura tra gli elementi.

Ridimensionare le puntine a ogni breakpoint

Una mappa del mondo perde gran parte della sua larghezza su un telefono tenuto in verticale, mentre i polpastrelli non si rimpiccioliscono affatto. I breakpoint rispondono con aree di tocco più ampie, meno etichette e una legenda che scende sotto la mappa. Le unità relative mantengono le dimensioni degli indicatori proporzionate tra i vari dispositivi, evitando che una puntina sembri un puntino su un portatile e una moneta su un tablet.

Le schermate con mappe contengono spesso stili che nessun'altra sezione del progetto utilizza. Nicepage documenta Esporta CSS minimo per pagina come modalità di esportazione opzionale che crea un foglio di stile separato solo con le regole richieste da una singola pagina, mantenendo gli stili complessi della mappa separati dal resto del sito.

Passa il cursore su alcune puntine, confronta la legenda con i riempimenti e visualizza il layout alla larghezza di uno smartphone. Queste verifiche rivelano molto di più su un template CSS di mappa del mondo rispetto a qualsiasi screenshot.