Mapa Del Mundo Plantillas CSS

Plantillas CSS de mapas del mundo personalizables con estilos de regiones y marcadores

Imagine un mapa del mundo donde los países donde ofrece servicio resalten con el tono verde azulado de su marca, el resto se desvanezca en un gris pálido y cada chincheta de oficina crezca ligeramente al pasar el cursor por encima. Las plantillas CSS de mapas del mundo le dan el control sobre esa capa visual, desde los rellenos y posiciones de etiquetas hasta los estados por los que pasa un marcador. Dado que las reglas se comparten, una sola edición en el color de resalte se aplica a cada país cubierto.

Estados hover y activo de los marcadores

Los marcadores son los elementos con los que los usuarios interactúan de verdad en un mapa del mundo. Un marcador que ignora el cursor parece roto, y uno que da un salto excesivo se ve poco profesional. La mayoría de los diseños de mapas del mundo se apoyan en un puñado de reglas visuales:

• un estado hover que agranda la chincheta o añade una sombra suave debajo
• un estado activo que mantiene la oficina seleccionada resaltada después de un clic
• colores de relleno y trazo para los países cubiertos, cuando el mapa es un SVG con formas independientes
• tarjetas de ayuda emergente con su propio fondo, relleno interno y radio de esquina

Una etiqueta blanca que se lee bien sobre el Atlántico puede desaparecer sobre el tono pálido del Sáhara. Una sombra de texto sutil o una base translúcida suelen solucionar esto mejor que un tamaño de fuente mayor.

Leyendas con etiquetas legibles

Una leyenda aporta significado a los colores del mapa, pero solo mientras sus muestras coincidan exactamente con el mapa. Las clases compartidas y las variables de color permiten que un único valor controle tanto el relleno del país como el recuadro correspondiente en la clave. Las etiquetas son más complejas, ya que los países pequeños del Caribe o los Balcanes no dejan espacio para texto dentro de sus fronteras. Una solución común es colocar esas etiquetas fuera de la forma con una línea guía fina, u ocultarlas en anchos reducidos. Junto al mapa, un diseño Grid mantiene alineada la columna de la leyenda, con un único valor de separación que define el espaciado intermedio.

Escalar chinchetas en cada punto de corte

Un mapa del mundo pierde la mayor parte de su ancho en un teléfono colocado en posición vertical, mientras que las yemas de los dedos no se reducen en absoluto. Los puntos de corte responden con áreas táctiles más amplias, menos etiquetas y una leyenda que pasa a situarse debajo del mapa. Las unidades relativas mantienen los tamaños de los marcadores proporcionales en todos los dispositivos, de modo que una chincheta no parezca un punto en un portátil y una moneda en una tableta.

Las pantallas con mapas a menudo contienen estilos que ninguna otra parte del proyecto utiliza. Nicepage documenta Exportar CSS mínimo por página como un modo de exportación opcional que genera una hoja de estilo independiente únicamente con las reglas que necesita una página concreta, evitando que el pesado estilo del mapa afecte al resto del sitio web.

Pase el cursor sobre varios marcadores, compare la leyenda con los rellenos y observe el diseño al ancho de un teléfono. Estas comprobaciones revelan mucho más sobre una plantilla CSS de mapa del mundo que cualquier captura de pantalla.