Carte Du Monde Modèles CSS

Modèles CSS de carte du monde personnalisables avec styles de régions et de marqueurs

Imaginez une carte du monde où les pays que vous desservez s'illuminent dans la couleur sarcelle de votre marque, le reste s'estompe en gris pâle et chaque repère de bureau grossit légèrement au survol du curseur. Les modèles CSS de carte du monde vous donnent le contrôle sur cette couche visuelle, des remplissages et de la position des étiquettes jusqu'aux états par lesquels passe un marqueur. Comme les règles sont partagées, une seule modification de la couleur de mise en valeur s'applique à tous les pays desservis.

États de survol et états actifs des marqueurs

Les marqueurs sont ce avec quoi les utilisateurs interagissent réellement sur une carte du monde. Un repère qui ignore le curseur semble défectueux, et un repère qui saute trop loin paraît de mauvaise qualité. La plupart des mises en page de cartes du monde reposent sur quelques règles visuelles :

• un état de survol qui agrandit un repère ou ajoute une ombre douce en dessous
• un état actif qui conserve le bureau sélectionné en surbrillance après un clic
• des couleurs de remplissage et de contour pour les pays desservis, lorsque la carte est un SVG composé de formes distinctes
• des encadrés d'infobulles avec leur propre arrière-plan, marge intérieure et rayon d'angle

Une étiquette blanche parfaitement lisible au-dessus de l'Atlantique peut devenir invisible sur la clarté du Sahara. Une fine ombre portée de texte ou un fond translucide résout généralement ce problème bien mieux qu'une police plus grande.

Légendes avec étiquettes lisibles

Une légende donne du sens aux couleurs de la carte, mais seulement tant que ses échantillons correspondent exactement à la carte. Les classes partagées et les variables de couleur permettent à une seule valeur de définir à la fois le remplissage du pays et le carré correspondant dans la légende. Les étiquettes sont plus délicates, car les petits pays des Caraïbes ou des Balkans ne laissent pas de place pour du texte à l'intérieur de leurs frontières. Une solution courante consiste à placer ces étiquettes à l'extérieur de la forme avec un trait de liaison fin, ou à les masquer sur les largeurs d'écran réduites. À côté de la carte, une mise en page Grid maintient la colonne de légende alignée, avec une valeur d'espacement unique définissant l'intervalle entre les éléments.

Mise à l'échelle des repères à chaque point d'arrêt

Une carte du monde perd la majeure partie de sa largeur sur un téléphone tenu à la verticale, alors que la taille des doigts ne diminue pas du tout. Les points d'arrêt répondent par des zones tactiles plus larges, moins d'étiquettes et une légende qui bascule sous la carte. Les unités relatives maintiennent la proportion des tailles de marqueurs sur tous les appareils, afin qu'un repère ne ressemble pas à un point sur un ordinateur portable et à une pièce de monnaie sur une tablette.

Les affichages cartographiques comportent souvent un style qu'aucun autre élément du projet n'utilise. Nicepage documente l'option Exporter un CSS minimal par page comme un mode d'exportation optionnel qui génère une feuille de style distincte contenant uniquement les règles nécessaires à une page donnée, afin que les styles de carte complexes ne viennent pas alourdir le reste du site.

Survolez quelques repères, comparez la légende avec les remplissages et observez la mise en page à la largeur d'un téléphone. Ces vérifications en disent bien plus sur un modèle CSS de carte du monde que n'importe quelle capture d'écran.