Desenhos em CSS na vida real: útil ou só diversão?

Resumo: Vamos falar sobre desenhos em CSS e o que a gente realmente pode aprender com eles e levar pra nossa carreira.

Oi! Vamos falar sobre CSS criativo?

Meu nome é Giulia, sou desenvolvedora front-end mas gosto de usar o termo desenvolvedora de UI, pois prefiro trabalhar com HTML e CSS do que JavaScript (o que não significa que eu não gosto de JS) 👋.

No último ano eu palestrei em alguns lugares falando sobre desenhos em CSS e como eles podem nos ensinar várias coisas. Achei que estava na hora de passar essa palestra para texto. Aqui está o vídeo da palestra caso você tenha interesse (em inglês ).

A primeira coisa que você tem que saber ao entrar no mundo dos desenhos em CSS é que:
Fazer desenhos em CSS complexos não é um atestado de nível pleno ou sênior em CSS. Só quer dizer que você gosta de explorar o lado criativo do código. Gostaria de deixar isso claro, as coisas que eu falo nesse artigo tem o objetivo de ser uma forma divertida de exercitar e aprender alguns conceitos e olhar pro CSS de outra forma. Se você está começando, recomendo você também criar um projeto pessoal usando boas práticas de desenvolvimento front-end.

Agora vamos a parte boa!

Você já fez um projeto só por diversão?

Sim, qualquer projeto, grande ou pequeno, CSS, JS ou Python, algo que você falou "vou fazer só pq me deu vontade?".

Nem sempre temos tempo pra projetos nossos nesse mundo de 40hrs/semana, família, casa e roupa pra lavar e gato pra alimentar. Mas as vezes a gente tem, as vezes a gente fica com vontade, e o que eu vou falar é uma sugestão pra usar nesses momentos "as vezes".

Comecei a aprender sobre desenvolvimento web no segundo ano da faculdade, e no terceiro eu estava planejando arrumar um estágio. Mas como arrumar um estágio se eu não tinha um portfolio? Isso me deu a ideia de fazer um site pessoal e colocar alguma coisa lá. Dessa ideia de colocar alguma coisa no meu portfolio nasceu meu mascote, o Dinokiki.

O site nasceu em 2014 com objetivo de me ajudar a conseguir um estágio e aprender jQuery (o React do momento). A ideia nasceu de um Vine do Jerome Jarre chamado "Mama Dinosaur finds her baby", em que dois caras gritavam kiki no meio do rua imitando dinossauros, e do site Pls Pet Doge, que ainda é bem divertido.

Criar o Dinokiki foi uma experiência muito boa já que o site não tem uma utilidade pro mundo além de ser divertido. Preciso admitir, ele foi muito útil na minha busca por estágio e para aprender novas tecnologias. Ainda hoje eu atualizo ele de vez em quando com um novo stack ou melhorias.

Com isso em mente, vamos pisar em território CSS. Se você nunca viu um desenho em CSS, aqui tem alguns exemplos:

Se esses desenhos são simples demais pra você, recomendo dar uma olhada nesse desenho da Diana Adrianne. Depois você me conta se acha que ela não aprendeu nada útil fazendo essa obra de arte em código 😉.

Pesquisa sobre desenhos em CSS

Comecei a fazer desenhos em CSS em 2016 no Codepen, em 2017 desenhos em CSS começaram a ficar mais populares pela internet. Em 2018, eu ainda tinha a impressão que muita gente achava isso bonitinho porém inútil, e decidi fazer uma pesquisa informal pra entender o que as pessoas desenvolvedoras achavam sobre o tema. Os resultados foram interessantes:

Pergunta 1: Você já ouviu falar sobre desenhos e/ou jogos em CSS?
77% Sim 😍
23% Não

Pergunta 2: Você já fez um desenho com CSS?
23% Sim
77% NÃO 😭

No final todas as pessoas que já fizeram um desenho com CSS aprenderam alguma coisa como:

• Praticar criatividade 🎨
• Posicionamento CSS 🧩
• Tags HTML 🔖
• Seletores CSS 👨‍👩‍👧‍👧 👨‍👨‍👦‍👦 👩‍👩‍👧‍👦
• Pseudo-elementos e pseudo-classes 👻

Isso já foi motivação o suficiente pra me dar vontade de espalhar a palavra dos desenhos em CSS!

Além disso, esses resultados me levaram a pensar que muita gente sabe o que são desenhos em CSS, mas não tem vontade de fazer. E os que fizeram aprenderam pelo menos alguma coisa relevante. Imagino que muita gente não deve entrar no mundo dos desenhos em CSS por motivos como:

Motivo 1: "Pra que perder meu tempo desenhando em CSS se isso é inútil pra minha carreira?"
Motivo 2: "Você precisa ser uma pessoa super criativa pra desenhar em CSS".

Então, deixa eu contar pra você, não é bem assim 💁🏻‍♀️

Dica: se você está sem ideias, reproduza um desenho que já existe em CSS. Quem sabe algo que você gostava quando era criança ou algo que você gosta hoje.

Como eu começo a desenhar em CSS?

Tá, você acha a ideia de desenhar em CSS legal, já achou algo pra reproduzir, mas está sem saber por onde começar? Calma, pega o caderno com lápis e vamos lá.

Percebi que ao criar um desenho eu sempre sigo o mesmo ciclo, que tem três fases:

Passo 1 - 🔨 Separar o desenho em formas geométricas

Essa parte eu costumo separar o desenho em formas geométricas simples que podem ser reproduzidas em CSS, como círculos, quadrados, trapézios, triângulos e retângulos. É legal fazer isso no papel, mesmo que alguns rabiscos, pra ajudar a entender como vai ser a estrutura em HTML do seu desenho.

Passo 2 - 🧩 Usar HTML para representar cada pedaço do desenho

A estrutura do desenho será feita com HTML, nessa parte eu costumo criar divs com uma classe em CSS representando o pedaço, como

<div class="olho"></div>

ou

<div class="cabeca"></div>

Passo 3 - 👩‍🎨 Usar CSS para estilizar cada pedaço

Uhuuul! Chegamos na última, mais legal, e mais longa parte! É aqui que nosso desenho vai nascer. Vamos estilizar cada pedaço de forma manual, imaginando ou olhando o resultado final que queremos atingir.

Aqui está o exemplo de um desenho em CSS do meu dinossauro, o Dinokiki. Você pode editar no CodePen:

Passo 1 - 🔨 Separar o desenho em formas geométricas

Passo 2 - 🧩 Usar HTML para representar cada pedaço do desenho

<div class="corpo"></div>

Passo 3 - 👩‍🎨 Usar CSS para estilizar cada pedaço

.corpo {
  background-color: var(--dino);
  border-radius: 100% 90% 80% 8%;
  height: 100px;
  position: absolute;
  width: 150px;
}

.corpo:after {
  background-color: var(--dino);
  bottom: -100px;
  content: '';
  height: 90px;
  left: 0;
  position: absolute;
  width: 65px;
}

E assim a gente faz um desenho em CSS!

Gosto muito de exercitar minha criatividade e os meus conhecimentos em CSS dessa forma, já que a gente acaba olhando pro código e para os atributos de uma forma diferente. Pretendo falar mais sobre isso no próximo artigo, sobre Jogos em CSS, que vai estar disponível em breve.

Se você quer conversar mais sobre esse assunto, achou algum erro, tem algum feedback construtivo, por favor, me manda um Oi no Twitter 😊

Obrigada por ler até aqui e até a próxima,

Giulia