Criando um Rosto de Koala com CSS Grid

Introdução

Neste projeto, você aprenderá como criar um rosto de Koala usando o layout de grade CSS. Você criará a estrutura geral do rosto, desenhará os olhos, o nariz e os elementos de rubor para completar as características faciais do Koala.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar um layout de grade para o rosto do Koala
• Como desenhar os olhos do Koala
• Como desenhar o nariz do Koala
• Como desenhar o rubor no rosto do Koala

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar o layout de grade CSS para criar designs complexos
• Posicionar e estilizar vários elementos dentro de uma grade
• Usar propriedades CSS como border-radius e background-color para criar formas e designs personalizados

Configurar o Projeto

Nesta etapa, você configurará o projeto e abrirá os arquivos no editor.

Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

├── styles.css
└── index.html

Aqui:

• index.html é a página principal.
• style.css é o arquivo onde você precisa adicionar os estilos necessários.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Para a posição das partes do rosto do koala, consulte o seguinte desenho da grade:

Configurar o Layout da Grade

Nesta etapa, você aprenderá como criar um layout de grade para o rosto do Koala.

1. Abra o arquivo styles.css no seu editor de código.
2. Adicione o seguinte código CSS a .face para criar o layout da grade:

.face {
  z-index: 1;
  width: 430px;
  height: 380px;
  background: #a0abb6;
  border-radius: 50%;
  display: grid;
  grid-template-columns: 1fr repeat(4, 25px) 1fr;
  grid-template-rows: 50px repeat(2, 1fr) 50px;
  align-items: center;
}

Este código cria um layout de grade com 6 colunas e 4 linhas. As partes frontal e traseira do rosto do Koala são representadas pelas duas colunas de largura igual à esquerda e à direita, enquanto as 4 colunas do meio têm 25px de largura. As linhas superior e inferior têm 50px de altura, e as duas linhas do meio têm a mesma altura.

Desenhar os Olhos

Nesta etapa, você aprenderá como desenhar os olhos do Koala.

1. Adicione o seguinte código CSS para criar os olhos:

.eye {
  width: 30px;
  height: 30px;
  background: #090b0e;
  border-radius: 50%;
  justify-self: center;
}

.eye.left {
  grid-area: 2/2/2/3;
}

.eye.right {
  grid-area: 2/5/2/6;
}

Este código cria dois olhos circulares, cada um com 30px de largura e 30px de altura, com uma cor escura (#090b0e) e cantos arredondados de 50%. A propriedade justify-self: center centraliza os olhos horizontalmente dentro de suas células de grade. As propriedades grid-area posicionam os olhos esquerdo e direito nas células de grade corretas.

Desenhar o Nariz

Nesta etapa, você aprenderá como desenhar o nariz do Koala.

1. Adicione o seguinte código CSS para criar o nariz:

.nose {
  background: #3b464f;
  border-radius: 50% 50% 40% 40%;
  height: 100%;
  grid-area: 3/2/3/6;
}

Este código cria um elemento em forma de nariz com uma cor escura (#3b464f) e cantos arredondados. A propriedade border-radius dá ao nariz uma forma arredondada, com os cantos superiores sendo arredondados em 50% e os cantos inferiores em 40%. A propriedade height: 100% faz com que o nariz se estenda por toda a altura de sua célula de grade, e a propriedade grid-area posiciona o nariz na célula de grade correta.

Desenhar o Blush

Nesta etapa, você aprenderá como desenhar o blush no rosto do Koala.

1. Adicione o seguinte código CSS para criar o blush:

.blush.left {
  grid-area: 2/1/3/2;
  align-self: end;
  justify-self: end;
}

.blush.right {
  align-self: end;
  grid-area: 2/6/3/7;
}

Este código cria dois elementos de blush circulares, cada um com 40px de largura e 30px de altura, com uma cor rosa claro (#f6b9bf) e cantos arredondados em 50%. As propriedades grid-area posicionam os elementos de blush esquerdo e direito nas células de grade corretas, e as propriedades align-self e justify-self alinham os elementos de blush dentro de suas células de grade.

Com estas etapas, você concluiu o projeto de desenho do rosto do Koala. Parabéns!

O resultado final é mostrado abaixo:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.