Preparando nossa "Folha em branco"

Agora que sabemos como criar formas básicas, podemos dar o próximo passo e preparar nossa folha de papel em branco para posicionarmos nossas formas e montar nosso desenho, a princípio usaremos apenas o bom e velho position, mas nos próximos artigos veremos flexbox e outras coisinhas legais sobre posicionamento.

Primeiro criaremos nossa tela branca, que será uma <div> simples, com o tamanho estimado do desenho a ser criado:

  .folha-branca {
  width: 500px;
  height: 500px;
  position: relative;
  border: 1px solid #000;
}

Dica: Durante o desenvolvimento do desenho, eu recomendo sempre usar bordas nos elementos que não são visualmente fáceis de identificar. Depois tiramos as bordas e fica tudo bem :)

Utilizamos o position: relative; em nossa folha para que seus filhos mesmo tendo position: absolute; sejam relativos a folha e não a pagina inteira. Apague o position: relative; do exemplo abaixo para entender melhor.

Ok, vamos analisar. Criamos uma bolinha rosa e definimos seu posicionamento como absoluto, ou seja, não será influenciado por nenhum outro elemento, estará literalmente em outra camada do desenho. Por fim, determinamos seu posicionamento na tela em branco com as propriedades top e right.

Beleza, daqui para frente já podemos deixar nossa criatividade agir e desenhar basicamente tudo o que conseguirmos juntando as formas que aprendemos no último post. Nesse ponto temos um grande poder, porém ainda é muito trabalhoso posicionar "manualmente" cada elemento, vamos melhorar isso nos próximos posts ;)

Que tal juntar tudo o que vimos e desenhar algo agora!

Nosso primeiro desenho

Tudo bem, ta muito feio rsrsr, mas vocês entenderam a ideia geral né?

Dica: Quando trabalhamos com multiplos elementos em multiplas camadas, é normal usarmos a propriedade z-index para organizar a ordem dessas camadas, mas prestem atenção em um detalhe importante: A propriedade z-index só funciona nos elementos em que a position esteja explicita, ou seja, mesmo que na maioria das vezes adicionar position: relative; não pareça fazer diferença, ela é importante para o funcionamento correto do z-index.

Conclusão

Nos próximos posts irei abordar coisas mais "novas" e técnicas. Eu preferi falar logo sobre posicionamento básico para deixar vocês livres para já criarem algo legal, então eu os desafio a pegarem as formas que aprendemos e as posicionarem para formar algo legal! Quem topar o desafio posta seu desenho lá pelo facebook ou aqui nos comentários ;)

Até amanhã!

<-- #1 - Formas básicas | Lista completa | #3 - Transformações -->


1,725 3 13