O Poder do CSS 3 — Desenhando Formas

Matheus Costa

Published in

HE:labs

3 min readNov 14, 2014

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!