Matheus Costa
Nov 14, 2014 · 3 min read

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.

HE:labs

Ideias e opiniões do time da HE:labs sobre desenvolvimento de software, design, negócios, gestão disruptiva e muito mais.

Thanks to HE:labs

Matheus Costa

Written by

UX Strategist / UI Developer. Organizer of @devtalksbr & @ixdabauru. Sometimes I speak at events

HE:labs

HE:labs

Ideias e opiniões do time da HE:labs sobre desenvolvimento de software, design, negócios, gestão disruptiva e muito mais.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade