Introdução a série

Depois de muito tempo sem fazer nada legal, resolvi pegar uma noite e fazer algo para me distrair e acabei criando o Jake apenas com CSS, depois de mostrar para a galera no facebook recebi alguns pedidos para ensinar os macetes para fazer essas coisas fofas com CSS.

Bem, aqui estou rsrs e vou criar alguns posts rápidos e diretos sobre como desenhar coisas divertidas com CSS, abordando várias funcionalidades que geralmente não são tão levadas a sério ou aprofundadas. Pretendo fazer tudo rápido, vou tentar escrever um post por dia na mais pura sagacidade.

Falaremos bastante sobre os seguintes paranauês:

  • border
  • border-radius
  • posicionamento (box model, flexbox, etc...)
  • box-shadow
  • background (gradient <3)
  • transform
  • animation
  • :before / :after
  • etc...

Todos os demos utilizados nos posts estarão organizados em pens dentro da collection Hora de aventura.

Formas básicas

Ok amigos jogo rápido, nesse post vamos criar algumas formas geométricas básicas.

PS: No mundo CSS existem muitas formas diferentes de fazer as mesmas coisas, começaremos do mais simples e gradualmente irei apresentando os macetes mais avançados ;)

Quadrado

Nada de mais.

Retângulo

Nada de mais esticado. hahaha

Circulo

border-radius é usado para arendondar as bordas dos elementos, a dica é levar essa curvatura a um ponto onde as quatro cantos se encontram formando um circulo perfeito.

Lembrando que podemos especificar quais ângulos serão arredondados.

Triângulo

Agora começa a ficar interessante, primeiro zeramos a largura e altura do elemento, em seguida aumentamos as bordas formando quatro formas triangulares que convergem para o centro (Que nada mais é do que nosso elemento sem tamanho), depois tornamos transparentes três desses lados deixando apenas um formando nosso triângulo.

Com as bordas coloridas podemos ver melhor do que estou falando :)

Conclusão

Mesmo sendo um conteúdo básico, podemos alterar ou adicionar propriedades nos exemplos acima e produzir formas loucas, lembrando que usaremos essas formas como base em nossos desenhos. Se alguém tiver alguma dúvida pode deixar aqui nos comentários ;)

Até amanhã!

Lista completa | #2 - Posicionamento -->


2,777 10 28