Mapa Mundial Modelos CSS

Modelos CSS de mapa-múndi personalizáveis com estilos de regiões e marcadores

Imagine um mapa-múndi em que os países atendidos se iluminam na cor azul-petróleo da sua marca, os demais esmaecem em cinza-claro e cada marcador de escritório aumenta suavemente quando o cursor passa sobre ele. Os modelos CSS de mapa-múndi dão a você o controle sobre essa camada visual, desde preenchimentos e posições de rótulos até os estados pelos quais um marcador passa. Como as regras são compartilhadas, uma única alteração na cor de destaque afeta todos os países atendidos.

Estados hover e ativo dos marcadores

Marcadores são os elementos com os quais as pessoas realmente interagem em um mapa-múndi. Um marcador que ignora o cursor parece com defeito, e um que salta demais parece mal acabado. A maioria dos layouts de mapa-múndi recorre a algumas regras visuais:

• um estado hover que amplia o marcador ou projeta uma sombra suave sob ele
• um estado ativo que mantém o escritório selecionado destacado após o clique
• cores de preenchimento e traçado para os países atendidos, quando o mapa for um SVG com formas separadas
• cartões de tooltip com plano de fundo, espaçamento interno e raio de borda próprios

Um rótulo branco que se lê perfeitamente sobre o Atlântico pode sumir sobre o tom claro do Saara. Uma sombra sutil de texto ou uma base translúcida normalmente resolvem isso melhor do que uma fonte maior.

Legendas com rótulos legíveis

Uma legenda transforma cores do mapa em significado, mas apenas quando suas amostras combinam exatamente com o mapa. Classes compartilhadas e variáveis de cor permitem que um único valor comande tanto o preenchimento do país quanto o quadrado correspondente na legenda. Rótulos são mais difíceis, porque pequenos países caribenhos ou balcânicos não deixam espaço para texto dentro de suas fronteiras. Uma solução comum é posicionar esses rótulos fora do formato com uma linha indicativa fina, ou ocultá-los em larguras menores. Ao lado do mapa, um layout Grid mantém a coluna da legenda alinhada, com um único valor de espaçamento regulando a distância entre eles.

Escalonando marcadores em cada ponto de interrupção

Um mapa-múndi perde a maior parte de sua largura em um celular mantido na vertical, enquanto as pontas dos dedos não diminuem em nada. Pontos de interrupção respondem com áreas de toque maiores, menos rótulos e uma legenda que vai para baixo do mapa. Unidades relativas mantêm os tamanhos dos marcadores proporcionais entre aparelhos, evitando que um marcador pareça um pontinho no notebook e uma moeda no tablet.

Telas de mapas frequentemente trazem estilos que nenhuma outra parte do projeto utiliza. O Nicepage documenta a opção Exportar CSS mínimo por página como um modo de exportação opcional que cria uma folha de estilo separada apenas com as regras de que uma página necessita, mantendo os estilos pesados do mapa fora do restante do site.

Passe o cursor sobre alguns marcadores, compare a legenda com os preenchimentos e avalie o layout na largura de um smartphone. Essas verificações revelam mais sobre um modelo CSS de mapa-múndi do que qualquer captura de tela.