Création d'un visage de koala avec CSS Grid

Introduction

Dans ce projet, vous allez apprendre à créer un visage de koala à l'aide de la mise en page en grille CSS. Vous créerez la structure générale du visage, dessinerez les yeux, le nez et les éléments de rougeur pour compléter les caractéristiques faciales du koala.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer une mise en page en grille pour le visage de koala
• Comment dessiner les yeux du koala
• Comment dessiner le nez du koala
• Comment dessiner la rougeur sur le visage du koala

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser la mise en page en grille CSS pour créer des designs complexes
• Positionner et styliser divers éléments dans une grille
• Utiliser des propriétés CSS telles que border-radius et background-color pour créer des formes et des designs personnalisés

Configurer le projet

Dans cette étape, vous allez configurer le projet et ouvrir les fichiers dans l'éditeur.

Ouvrez le dossier du projet, qui contient les fichiers et les répertoires suivants :

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

Ici :

• index.html est la page principale.
• style.css est le fichier dans lequel vous devez ajouter les styles requis.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Pour la position des parties du visage du koala, consultez le dessin en grille suivant :

Configurer la mise en page en grille

Dans cette étape, vous allez apprendre à créer une mise en page en grille pour le visage du koala.

1. Ouvrez le fichier styles.css dans votre éditeur de code.
2. Ajoutez le code CSS suivant à .face pour créer la mise en page en grille :

.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;
}

Ce code crée une mise en page en grille avec 6 colonnes et 4 lignes. Les parties avant et arrière du visage du koala sont représentées par les deux colonnes de largeur égale à gauche et à droite, tandis que les 4 colonnes du milieu ont une largeur de 25px. Les lignes supérieure et inférieure ont une hauteur de 50px, et les deux lignes du milieu ont la même hauteur.

Dessiner les yeux

Dans cette étape, vous allez apprendre à dessiner les yeux du koala.

1. Ajoutez le code CSS suivant pour créer les yeux :

.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;
}

Ce code crée deux yeux circulaires, chacun mesurant 30px de large et 30px de haut, de couleur sombre (#090b0e) et avec des coins arrondies à 50 %. La propriété justify-self: center centre les yeux horizontalement dans leurs cellules de grille. Les propriétés grid-area positionnent les yeux gauche et droit dans les cellules de grille correctes.

Dessiner le nez

Dans cette étape, vous allez apprendre à dessiner le nez du koala.

1. Ajoutez le code CSS suivant pour créer le nez :

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

Ce code crée un élément en forme de nez avec une couleur sombre (#3b464f) et des coins arrondis. La propriété border-radius donne au nez une forme arrondie, les coins supérieurs étant arrondis à 50 % et les coins inférieurs à 40 %. La propriété height: 100% fait en sorte que le nez occupe toute la hauteur de sa cellule de grille, et la propriété grid - area positionne le nez dans la cellule de grille correcte.

Dessiner les rougeurs

Dans cette étape, vous allez apprendre à dessiner les rougeurs sur le visage du koala.

1. Ajoutez le code CSS suivant pour créer les rougeurs :

.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;
}

Ce code crée deux éléments de rougeurs circulaires, chacun mesurant 40px de large et 30px de haut, de couleur rose pâle (#f6b9bf) et avec des coins arrondis à 50 %. Les propriétés grid - area positionnent les éléments de rougeurs gauche et droit dans les cellules de grille correctes, et les propriétés align - self et justify - self alignent les éléments de rougeurs à l'intérieur de leurs cellules de grille.

Avec ces étapes, vous avez maintenant terminé le projet de dessin du visage du koala. Félicitations!

Le résultat final est montré ci - dessous :

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.