Creando una cara de koala con CSS Grid

Introducción

En este proyecto, aprenderás a crear una cara de koala utilizando el diseño de cuadrícula CSS. Crearás la estructura general de la cara, dibujarás los ojos, la nariz y los elementos de rubor para completar las características faciales del koala.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar un diseño de cuadrícula para la cara del koala
• Cómo dibujar los ojos del koala
• Cómo dibujar la nariz del koala
• Cómo dibujar el rubor en la cara del koala

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar el diseño de cuadrícula CSS para crear diseños complejos
• Posicionar y dar estilo a varios elementos dentro de una cuadrícula
• Utilizar propiedades CSS como border-radius y background-color para crear formas y diseños personalizados

Skills Graph

Configurar el proyecto

En este paso, configurarás el proyecto y abrirás los archivos en el editor.

Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

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

Aquí:

• index.html es la página principal.
• style.css es el archivo donde debes agregar los estilos necesarios.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Para la posición de las partes de la cara del koala, consulta el siguiente dibujo de cuadrícula:

Configurar el diseño de cuadrícula

En este paso, aprenderás a crear un diseño de cuadrícula para la cara del koala.

1. Abre el archivo styles.css en tu editor de código.
2. Agrega el siguiente código CSS a .face para crear el diseño de cuadrícula:

.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 crea un diseño de cuadrícula con 6 columnas y 4 filas. Las partes frontal y posterior de la cara del koala se representan por las dos columnas de ancho igual en el lado izquierdo y derecho, mientras que las 4 columnas del medio tienen un ancho de 25px. Las filas superior e inferior tienen una altura de 50px, y las dos filas del medio tienen la misma altura.

Dibujar los ojos

En este paso, aprenderás a dibujar los ojos del koala.

1. Agrega el siguiente código CSS para crear los ojos:

.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 crea dos ojos redondos, cada uno con 30px de ancho y 30px de alto, de color oscuro (#090b0e) y bordes redondeados al 50%. La propiedad justify-self: center centra los ojos horizontalmente dentro de sus celdas de cuadrícula. Las propiedades grid - area posicionan los ojos izquierdo y derecho en las celdas de cuadrícula correctas.

Dibujar la nariz

En este paso, aprenderás a dibujar la nariz del koala.

1. Agrega el siguiente código CSS para crear la nariz:

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

Este código crea un elemento en forma de nariz con un color oscuro (#3b464f) y bordes redondeados. La propiedad border - radius le da a la nariz una forma redondeada, con las esquinas superiores redondeadas al 50% y las esquinas inferiores redondeadas al 40%. La propiedad height: 100% hace que la nariz cubra toda la altura de su celda de cuadrícula, y la propiedad grid - area posiciona la nariz en la celda de cuadrícula correcta.

Dibujar la sonrisa ruborizada

En este paso, aprenderás a dibujar la sonrisa ruborizada en la cara del koala.

1. Agrega el siguiente código CSS para crear la sonrisa ruborizada:

.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 crea dos elementos de sonrisa ruborizada en forma de círculo, cada uno con 40px de ancho y 30px de alto, de color rosa claro (#f6b9bf) y bordes redondeados al 50%. Las propiedades grid - area posicionan los elementos de sonrisa ruborizada izquierdo y derecho en las celdas de cuadrícula correctas, y las propiedades align - self y justify - self alinean los elementos de sonrisa ruborizada dentro de sus celdas de cuadrícula.

Con estos pasos, ahora has completado el proyecto de dibujo de la cara del koala. ¡Felicitaciones!

El resultado final se muestra a continuación:

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.