Desenhar em CSS: a galinha

Como prometido no artigo desenhar em CSS: formas, hoje vamos aprender a desenhar uma galinha em CSS!

Se nos tem seguido durante algum tempo terá reconhecido o frango que desenhei para a Páscoa do ano passado, o que é inspirado por uma ilustração que encontrei em Dribbble.

A começar: preparar o seu corpo

Quando desenho em CSS, cada elemento visível é um div que reestilo (ou um :antes/:depois mas sempre de um div). Assim, vamos começar de forma simples para o nosso HTML com apenas um div com uma galinha de classe:

Aqui o nosso div de galinha irá simplesmente servir de invólucro para o resto e não terá qualquer estilo. Vamos apenas colocá-lo em posição: relativamente à posição dos outros elementos em relação a este! E, como na maioria dos meus tutoriais, vamos estilizar o corpo para centrar o nosso design através de uma exposição: flex!!

body {background-color: #00bcd4;display: flex;justify-content: center;align-items: center;height: 100vh;}.chicken {position: relative;}

Agora que a fundação está lançada, vamos poder começar a trabalhar e começar a desenhar o nosso frango. Adicione um mergulho com como corpo de classe no seu mergulho de galinha. E para responder a um dos grandes mistérios do universo, “O ovo ou a galinha? Na realidade, esta questão não faz sentido porque a galinha é um ovo! Assim, como um corpo vamos desenhar uma forma de ovo:

.body {width: 150px;height: 170px;background-color: #fff;border-radius: 50% / 60% 60% 40% 40%;}

Se não compreender bem como funciona este código, convido-o a ler o artigo da semana passada no qual expliquei como desenhar um ovo. Uma vez que vamos querer desenhar um rosto no interior, vamos colocar o corpo em posição: relativa. E para mais realismo vamos adicionar também uma pequena sombra, por isso acrescente estas duas linhas à sua classe corporal:

position: relative;box-shadow: 7px 7px 0 7px #eee;

Passo 2: o rosto

P>Comecemos por dar à nossa galinha a vista. Se olharmos para a ilustração, temos um olho a aparecer na parte superior do corpo e outro na parte inferior. Assim, vamos criar dois mergulhos com a classe dos olhos, um no nosso body div e outro no nosso chicken div, mesmo por cima do corpo. No nosso primeiro mergulho oftalmológico, vamos também acrescentar uma classe olho-direita para a distinguir da outra e posicioná-la correctamente. Faremos então dois círculos negros:

.eye {position: absolute;height: 15px;width: 15px;border-radius: 50%;background-color: #000;top: 50px;}.eye-right {left: 50px;}

Se tudo correr bem, deve obter isto por agora:

Um ovo a olhar para si
Um ovo a olhar para si

Agora podemos adicionar-lhe um bico! Vamos separar o bico em duas partes: a parte superior e a inferior, portanto acrescente isto ao seu corpo:

<div class="beak-top"></div><div class="beak-bottom"></div>

Para a parte superior vamos desenhar um meio círculo amarelo. Para o fazer, basta colocar um rádio-fronteira nos dois cantos do topo do mesmo tamanho que a altura do seu elemento. Acrescentaremos também um efeito de “reflexão” no bico, para que se possa usar uma sombra ou uma fronteira. E como é mais curto escrever, aqui passei por uma borda que simplesmente coloquei em branco à esquerda do bico.

Para a parte de baixo, simplesmente desenhamos um rectângulo laranja com os dois cantos de baixo arredondados:

.beak-top {width: 27px;height: 15px;background-color: #FFDA0F;border-radius: 27px 27px 0 0;position: absolute;top: 70px;left: -10px;border-left: 3px solid #fff;}.beak-bottom {width: 20px;height: 7px;background-color: #f0ba43;border-radius: 0 0 7px 7px;position: absolute;top: 85px;left: -1px;}

E para terminar o bico, precisamos de adicionar a parte vermelha por baixo do bico. E como não faço ideia de como se chama, usei sobriamente “sub-bico” como a classe. Tenha cuidado, como quer posicioná-lo debaixo do bico, o seu mergulho deve ser posicionado acima dos dois mergulhos do bico (também pode jogar com índices z mas aconselho-o a evitá-lo o mais possível)! Em seguida, fazemos simplesmente um rectângulo vermelho e brincamos com o border-radius para dar esta forma particular:

.under-beak {height: 20px;width: 15px;background-color: #A20000;position: absolute;top: 85px;left: 5px;border-radius: 20px 2px 8px 8px;}

A asa ou coxa

Para a asa, desenhamos um rectângulo transparente, contornamos os seus cantos inferiores e mostramos apenas as bordas inferior e esquerda. Adicione o mergulho de asa no seu corpo, e no seu CSS, escreva:

.wing {width: 40px;height: 20px;border-radius: 0 0 10px 30px;position: absolute;top: 100px;left: 75px;border: 5px solid;border-color: transparent transparent #000 #000;}

Para as pernas também precisamos de ter uma à frente do corpo e uma atrás dele, portanto faça o mesmo que para os olhos: um mergulho de perna/direita no corpo e um mergulho de perna fora do corpo, acima dele. Depois simplesmente desenhamos dois rectângulos de altura suficiente e com bordas superiores e inferiores arredondadas:

.leg {position: absolute;width: 10px;height: 30px;border-radius: 10px;left: 55px;background-color: #f0ba43;bottom: -35px;}.leg-right {left: 80px;background-color: #FFDA0F;}

O toque final

Assim poderemos adicionar a crista e a cauda da nossa galinha. Uma vez que ambos são formas repetidas, vamos apenas criar um elemento para cada um e depois brincar com a sombra da caixa. Adicione um mergulho de crista e um mergulho de cauda no seu HTML.

Bambos serão rectângulos com bordas superiores arredondadas e uma borda exposta para obter um efeito de reflexão como o bico. Depois, com uma transformação, inclinamos cada um deles e duplicamos o elemento com uma caixa-sombra.

Uma característica especial para a crista: para obter a reflexão sobre dois dos elementos, criaremos uma sombra extra, mais leve e compensamos apenas alguns pixels do outro. Isto dá-nos isto:

.crest {width: 30px;height: 40px;background-color: #A20000;border-radius: 40px 40px 0 0;position: absolute;top: -25px;left: 45px;border-left: 6px solid #D30700;transform: rotate(-10deg);box-shadow: 31px 14px 0 0 #A20000, 27px 14px 0 3px #D30700, 50px 30px 0 0 #A20000;}.tail {width: 30px;height: 70px;background-color: #A20000;border-radius: 40px 40px 0 0;position: absolute;top: 90px;right: -25px;border-right: 6px solid #D30700;transform: rotate(50deg);box-shadow: -23px -10px 0 0 #A20000;}

O pequeno extra: dar um pouco de vida

Uma animação muito simples que gosto muito de colocar nos meus vários desenhos CSS: olhos a piscar! É apenas uma questão de reduzir o tamanho dos olhos ajustando a altura para que o centro permaneça o mesmo:

.eye {animation: 8s chickenEye 1s infinite;}@keyframes chickenEye {2%{height: 7px;top: 54px;}4%{height: 15px;top: 50px;}6%{height: 7px;top: 54px;}8%{height: 15px;top: 50px;}}

E na minha aula de olhos simplesmente activo a animação após um segundo após o carregamento da página, e a cada 8s a minha galinha vai piscar duas vezes!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *