Recapitulando

Vamos relembrar um pouco o que já vimos:

Massa! Agora que tal juntarmos tudo para desenhar algo que represente o motivo desta série de posts existir? Vamos la!

Desenhando um coração em três passos simples

Passo 1: Formas básicas

Começamos bem! Criamos uma <div> coração sem estilo e dentro dela criamos três formas: um quadrado e dois circulos (todas com o mesmo tamanho).

Passo 2: Posicionamento

Em seguida determinamos os três elementos como absolutos (porém relativos a <div> coracao) e posicionamos nossos circulos com metate do tamanho para fora do quadrado, um para a direita e outro para baixo.

Passo 3: Transformação

Agora definimos uma largura e altura fixa na <div> coracao, aproveitamos e adicionamos uma cor no background para facilitar a vizualização, em seguida usamos o transform para rotacionar nosso coração para o deixar no ângulo certo ;)

Resultado final

Para finalizar, tiramos uma borda aqui, ajustamos uns backgrounds ali, adicionamos um margin de leve para não cortar a lateral e .... pronto <3

Bônus

Para dar uma motivada extra vou compartilhar alguns desenhos que fiz quando estava começando a brinca no codepen há algum tempo. O código deve estar feioso rsrsr, mas ta valendo :)

Até amanhã.

<-- #3 - Transformações | Lista completa | #5 - Animações (parte 1) -->


1,917 8 5