Bússola com CSS3 e HTML5

Outro dia eu estava navegando pela web lendo artigos como faço diariamente e me deparei com um desafio proposto pelo Bernard De Luna no site do iMasters, que tinha como objetivo criar uma bússola utilizando apenas CSS3 e HMTL5. Decidi então colocar meus conhecimentos a prova e tirei o dia pra desenvolver esse desafio.

Desenvolvendo a Bússola

A primeira coisa que fiz foi buscar uma série de imagens de bússola e ver o que era possível fazer com CSS. Percebi que não ia precisar usar nada além do que já usava no meu dia-a-dia no desenvolvimento aqui na contagia.

Decidi criar um elemento dentro do outro e apliquei border-radius (deixa a borda arredondada) e um tamanho diferente para cada elemento, para dar uma profundidade e criar os ponteiros dentro do último elemento com a borda redondada. Para criar o ponteiro decidi colocar um :after para cada ponteiro (span) e usei o conceito de criar setas utilizando Border, como mostrado neste artigo do Danilo e posicionei os ponteiros com position: absolute alterando o top e o left de cada ponteiro.

Para o ponteiro girar quando o mouse está sobre a bússola eu utilizei o CSS transition que muda o ângulo (transform:rotate(387deg)) no hover do elemento. Basicamente foi isso que usei de diferente para desenvolver a bússola o resto quem é desenvolvedor Front-End já está habituado a fazer. Acesse o link e veja a Bússola em funcionamento.

Bússola - desafio CSS - Djalma Toledo

Gostei muito de ter participado desse desafio, aprendi muita coisa desenvolvendo e analisando a bússola dos outros participantes. Percebi que cada um interpreta o CSS da sua maneira.

Deixe sua impressão sobre minha bússola, qualquer dica, crítica ou comentário será bem vindo pra tentar melhorar cada vez mais o meu trabalho.

Newsletter

Cadastre-se Agora!

Artigos Similares

Djalma Toledo

Técnico em eletrônica formado pelo CEPHAS de São José dos Campos. Autodidata em XHTML, CSS e WordPress no qual se especializou nos últimos anos. As vezes arrisca uns códigos PHP e jQuery. Também é montanhista e músico.

4 respostas para “Bússola com CSS3 e HTML5”

  1. James disse:

    Muito bom! Fiquei curioso como isso é possível só com CSS, vi o código fonte, da hora mesmo Djalma =)

  2. Fala Djalma! Sou o Diogo Cercílio. Participei deste concurso também, e consegui levar o prêmio desta vez, apesar de todos os trabalhos que eu vi também terem sido excelentes trabalhos, inclusive o seu. Também sou de São José dos Campos, e por coincidência também estudei no CEPHAS.. hehe. Parabéns mesmo!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *