CSS-Gitterlayout | Koala-Gesichtsdesign

Einführung

In diesem Projekt lernst du, wie du mithilfe von CSS-Gitterlayout ein Koala-Gesicht erstellen kannst. Du wirst die gesamte Gesichtsstruktur erstellen, die Augen, die Nase und die Backenröte zeichnen, um die Gesichtszüge des Koalas zu vervollständigen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du ein Gitterlayout für das Koala-Gesicht einrichtest
Wie du die Augen des Koalas zeichnest
Wie du die Nase des Koalas zeichnest
Wie du die Backenröte auf dem Gesicht des Koalas zeichnest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

CSS-Gitterlayout verwenden, um komplexe Designs zu erstellen
Verschiedene Elemente innerhalb eines Gitters zu positionieren und zu gestalten
CSS-Eigenschaften wie border-radius und background-color verwenden, um benutzerdefinierte Formen und Designs zu erstellen

Projekt einrichten

In diesem Schritt wirst du das Projekt einrichten und die Dateien im Editor öffnen.

Öffne den Projektordner, der die folgenden Dateien und Verzeichnisse enthält:

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

Hierbei:

index.html ist die Hauptseite.
style.css ist die Datei, in der du die erforderlichen Stile hinzufügen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Für die Position der Teile des Koala-Gesichts siehe das folgende Gitterbild:

Gitterlayout einrichten

In diesem Schritt wirst du lernen, wie du ein Gitterlayout für das Koala-Gesicht erstellst.

Öffne die Datei styles.css in deinem Code-Editor.
Füge den folgenden CSS-Code zu .face hinzu, um das Gitterlayout zu erstellen:

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

Dieser Code erstellt ein Gitterlayout mit 6 Spalten und 4 Zeilen. Die vorderen und hinteren Teile des Koala-Gesichts werden durch die beiden gleichbreiten Spalten links und rechts dargestellt, während die 4 mittleren Spalten 25px breit sind. Die oberste und unterste Zeile sind 50px hoch, und die beiden mittleren Zeilen haben die gleiche Höhe.

Die Augen zeichnen

In diesem Schritt wirst du lernen, wie du die Augen des Koalas zeichnest.

Füge den folgenden CSS-Code hinzu, um die Augen zu erstellen:

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

Dieser Code erstellt zwei runde Augen, jede 30px breit und 30px hoch, mit einer dunklen Farbe (#090b0e) und 50% abgerundeten Ecken. Die Eigenschaft justify-self: center zentriert die Augen horizontal innerhalb ihrer Gitterzellen. Die grid-area-Eigenschaften positionieren die linke und rechte Augen in den richtigen Gitterzellen.

Die Nase zeichnen

In diesem Schritt wirst du lernen, wie du die Nase des Koalas zeichnest.

Füge den folgenden CSS-Code hinzu, um die Nase zu erstellen:

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

Dieser Code erstellt ein naseförmiges Element mit einer dunklen Farbe (#3b464f) und abgerundeten Ecken. Die border-radius-Eigenschaft gibt der Nase eine abgerundete Form, wobei die oberen Ecken 50% abgerundet und die unteren Ecken 40% abgerundet sind. Die Eigenschaft height: 100% lässt die Nase die volle Höhe ihrer Gitterzelle ausfüllen, und die grid-area-Eigenschaft positioniert die Nase in der richtigen Gitterzelle.

Die Backenröte zeichnen

In diesem Schritt wirst du lernen, wie du die Backenröte auf dem Koala-Gesicht zeichnest.

Füge den folgenden CSS-Code hinzu, um die Backenröte zu erstellen:

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

Dieser Code erstellt zwei kreisförmige Backenröte-Elemente, jedes 40px breit und 30px hoch, mit einer hellrosa Farbe (#f6b9bf) und 50% abgerundeten Ecken. Die grid-area-Eigenschaften positionieren die linken und rechten Backenröte-Elemente in den richtigen Gitterzellen, und die align-self- und justify-self-Eigenschaften positionieren die Backenröte-Elemente innerhalb ihrer Gitterzellen.

Mit diesen Schritten hast du jetzt das Koala-Gesichts-Zeichnungsprojekt abgeschlossen. Herzlichen Glückwunsch!

Das fertige Ergebnis ist unten gezeigt: