Campo de busca

Categoria Front-End

CSS
Calculadora sem imagens utilizando CSS3 e JavaScript

Calculadora sem imagens utilizando CSS3 e JavaScript

Por | 12 de julho, 2012 | 0 comentários

No domingo (08/06) parte da nossa equipe foi ao evento The Developers Conference, após conferir vários exemplos legais do uso do HTML5 e CSS3 (entre eles o OldRadio) tive a ideia de criar algum objeto do nosso cotidiano tendo a ideia de não usar imagens para compor o design, apenas código. Como esse projeto foi experimental, não queria me preocupar com suporte à navegadores antigos, no final tive uma experiência muito legal.

Pensei em vários objetos para fazer, celulares, telefones, mas no final o escolhido foi a calculadora.

1º Software

Como foi um projeto “caseiro” decidi escolher o famoso Sublime Text, que oferece diversos plugins úteis para o desenvolvimento de qualquer tipo de projeto, além de ser altamente configurável.

2º Tecnologias

Para a marcação, escolhi xHTML (não tive nenhum pré-requisito para a linguagem de marcação), já na área de estilização usei CSS3 para criar gradients (essenciais para um melhor apelo visual), além do border-radius e do @font-face.

Para realizar os cálculos, usei o bom e velho JavaScript.

3º Desenvolvimento

No desenvolvimento precisava de ferramentas ágeis para agilizar o trabalho, pois tive 1 dia como prazo, no Sublime, o que me ajudou bastante foi o plugin Prefixr que adiciona prefixos dos navegadores automaticamente, além do Zen Coding que auto completa tags do HTML.

Um dos diferenciais neste trabalho, foi trabalhar com o Framework LESS, que diminui bastante o tempo final de desenvolvimento.

Resultado final

O resultado vocês podem conferir neste link, se gostou, dê um like e deixe sua opinião :-)

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[0] Comentários  

Nenhum comentário em "Calculadora sem imagens utilizando CSS3 e JavaScript". Seja o primeiro a comentar!