O Poder do CSS 3 — Desenhando Formas
Sem imagens, sem JavaScript ou Flash e com poucas tags HTML!
A Origem das Formas
Nos primórdios da web, todo web designer era forçado a fazer seu site seguindo retângulos e quadrados. Caso quisesse algo um pouco diferente, utilizava imagens, mas ainda assim não tinha um resultado tão legal.
Um pouco mais adiante veio o Flash (R.I.P), expandindo esse universo de maneira simples, porém pesada.
Em seguida, surgiu o JavaScript, que era meio complicado comparado aos outros, mas bem mais leve.
E por fim, o CSS na sua 3ª versão, disponibilizou seletores capazes de realizarem essas transformações de forma rápida e prática.
Porque Desenhá-las
As formas são necessárias na hora de diversificar um layout e fazendo isso por CSS você tem vários pontos a seu favor:
- É mais leve do que usar imagens;
- Tem melhor resultado do que as imagens;
- É mais simples do que fazer canvas;
- O cross-browser é alto;
- Muito fácil de usar.
Segue abaixo alguns exemplos de layouts usando formas de modo avassalador, feitos com CSS3:
Como Começar
Existem diversas maneiras de se fazer as formas. Vou abordar os métodos mais simples pra ficar bem fácil o entendimento, evitando o uso de Mixins, Extends e sem simplificar muito o Sass.
■ Quadriláteros
As formas mais básicas são os quadriláteros. Alguns nem exigem CSS3 pra reproduzi-los, como é o caso do quadrado, retângulo e trapézio.
Usei a propriedade transform: skew(20deg); para deixar o paralelogramo no ângulo correto e, no caso do losango, apenas rotacionei o quadrado com transform: rotate(45deg);.
▲ Triláteros
Tão simples quanto o quadrado, os triângulos equiláteros também não exigem nenhuma função específica de CSS3.
Precisa fazer uma seta? Com 5 linhas de CSS você pode fazer, sem necessidade de importar imagens.
● Circunferências
Vem sendo muito utilizadas em avatares e são feitas com um simples border-radius: 50%.
A lua foi feita com box-shadow, mas também poderia ser feita com :after, duplicando o conteúdo e invertendo a cor.
ᗣ Pac-Man Ghost
Como bônus do post, eu vou mostrar como eu fiz o Blinky, o fantasminha vermelho do Pac-man.
O Markup
Usei apenas 5 classes: .ghost pra área geral; .head pro formato da cabeça; .eyeBack pro fundo do olho; .eye pro olho e .legs para a “saia” ou “pés” do fantasma.
<div class="ghost">
<div class="head">
<div class="eyeBack">
<div class="eye"></div>
</div>
<div class="eyeBack">
<div class="eye"></div>
</div>
</div>
<div class="legs"></div>
<div class="legs"></div>
</div>Estilo da Área Geral
O motivo de eu ter usado [class*=”ghost”] é de reaproveitar o mesmo estilo para os outros 3 fantasmas, já que o que muda são apenas as cores.
[class*="ghost"] {
height: 200px;
margin: 25px;
position: relative;
width: 200px;
}Estilo da Cabeça
Levando em conta que $Blinky: red; aqui eu deixei metade da altura pra área da cabeça e com border-radius eu fiz a curvatura.
.head {
background: $Blinky; height: 100px;
position: relative;
width: 152px;
}
Estilo pros Olhos
Eu poderia ter feito os olhos apenas usando uma classe e com pseudo elementos faria a íris, mas no próximo post vai ficar claro porque decidi fazer separado.
.eye,
.eyeBack {
position: relative;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}.eyeBack {
background: #FFF;
height: 50px;
width: 50px; &:first-child {
float: left;
margin: 50px 0 0 25px;
}
&:last-child {
float: right;
margin: 50px 25px 0 0;
}
}.eye {
background: #0d2bd7;
height: 25px;
margin:10%;
width: 25px;
}
Estilo das pernas
Por fim, nas pernas não fiz nada mais do que dois triângulos lado a lado usando border-.
.legs {
border-right: 38px solid $Blinky;
border-left: 38px solid $Blinky;
border-bottom: 40px solid transparent;
display: block;
float: left;
height: 40px;
width: 0;
}Resultado
Pronto! Está feito o Blinky, sem usar imagem nenhuma, apenas CSS!
No próximo post vamos dar vida pra ele.
Tem uma galera que faz desenhos representando personagens ou ícones famosos pela web. Você pode encontrá-los em sites como o Codepen, o Mozilla Demo Studio e o CSS Deck.
Valeu!
Quer saber um pouco mais sobre como criamos produtos digitais incríveis e mudamos a vida das pessoas? Acesse o nosso site!
Originally published at helabs.com on November 14, 2014.
