Mapa do Brasil usando CSS

2,455 views
Skip to first unread message

Hélio Araújo de Oliveira

unread,
Jul 24, 2012, 9:21:57 AM7/24/12
to list...@googlegroups.com
Olá, sou back-end e "faz-tudo" então, acredito que alguns possam ter se deparado com a solicitação de um cliente para mostrar um mapa do Brasil com efeitos de mouse, etc.

Pensando na dificuldade de achar isto na web, criei um projeto no github para isso, quem tiver interesse pode colaborar. Peço desculpas caso o off-topic tenha incomodado, a intenção foi ajudar.
Exemplo em https://ponto.me/tmp/mapa_Brasil_CSS/map.html 


Abaixo segue link e descrição
Mapa do Brasil mapeado em CSS
- Arquivos fontes em alta resolução e mapa em SVG viahttps://commons.wikimedia.org/wiki/File:Brazil_Blank_Map_light.svg
- Arquivos finais em 16 cores e extremamente leve
- Sprite em 16 cores e criado via http://css.spritegen.com
- Ao mudar o tamanho, infelizmente as regras de "margin" das tags ul e li deverão ser reescritas manualmente

https://github.com/insign/mapa_Brasil_CSS 

gaido

unread,
Jul 24, 2012, 11:53:58 AM7/24/12
to list...@googlegroups.com
Cara, ficou muito fera!

Bruno Monteiro

unread,
Jul 24, 2012, 12:55:25 PM7/24/12
to list...@googlegroups.com
Nossa, ficou muito bacana!!

--
============================================================
JQUERY MAGAZINE > http://www.jquerymagazine.com.br
--
PHP MAGAZINE > http://www.phpmagazine.com.br
--
LISTA NODE.JS > https://groups.google.com/group/lista-nodejs?hl=pt-br
--
AJAX-BRASIL > http://groups.google.com/group/ajax-brasil
--
PYTHON-GOOGLE > http://groups.google.com.br/group/python-google
--
DOTNET-BRASIL > http://groups.google.com.br/group/dotnet_br
============================================================



--
br...@trupe.net
Trupe - Agência Criativa
Aclimação – São Paulo – SP – Brasil
(11) 2861.1590


Filipe

unread,
Jul 24, 2012, 12:42:00 PM7/24/12
to list...@googlegroups.com
Muito bom, parabéns.


--

Filipe Nunes

unread,
Jul 24, 2012, 1:28:58 PM7/24/12
to list...@googlegroups.com
Cara que loucura, quantas horas demorou fazendo isso ?

Cumprimentos,
Filipe Nunes

Márcio Fornari

unread,
Jul 24, 2012, 1:24:53 PM7/24/12
to list...@googlegroups.com
Cara, parabéns, ficou ótimo!

2012/7/24 Bruno Monteiro <bmont...@gmail.com>



--
Green day Forever and Ever!!!

.Márcio Fornari 
.Bacharel em  Sistemas de Informação
.Contatos pelo Telefone: (49)8814 - 3378
.ou pelo e-mail: marcio...@gmail.com
.Msn: marci...@hotmail.com
..........................................................................

Hélio

unread,
Jul 24, 2012, 1:47:45 PM7/24/12
to list...@googlegroups.com
4 horas, na madrugada de hoje. Mas o trabalho já tava feito, como pode ver no código, os créditos.

2012/7/24 Filipe Nunes <chab...@gmail.com>



--
Hélio Araújo de Oliveira
Evite correntes de e-mails e combata o spam.
Prefira materiais reciclados, incluindo papel

Paulo Diovani

unread,
Jul 30, 2012, 9:30:24 AM7/30/12
to list...@googlegroups.com
Ficou bom, mas tem um porém,

As âncoras/links são todas áreas retangulares, acho que você consegue fazer o contorno correto do mapa usando os elementos area e map, e com uma boa dose de paciência. ;)

--
Paulo Diovani,

Cassiano Ricardo Mourão

unread,
Jul 30, 2012, 9:35:51 AM7/30/12
to list...@googlegroups.com
Tá no git. Vai lá e faz =]
 
pelo menos de alguns estados, e posta aqui...

2012/7/30 Paulo Diovani <pa...@diovani.com>
Reply all
Reply to author
Forward
0 new messages