Erstellen Sie beeindruckende Schachbrett-Hintergründe mit CSS

Einführung

In diesem Lab werden wir uns mit CSS-Programmierung befassen, um ein Schachbrettmuster als Hintergrund zu erstellen. Sie werden lernen, wie Sie CSS-Gradiententechniken nutzen können, um ein optisch ansprechendes Schachbrettmuster zu gestalten, das verschiedene Webprojekte verbessern kann. Das Schachbrettmuster ist ein klassisches Gestaltungselement, das aus abwechselnd gefärbten Quadraten besteht, die in einem Raster angeordnet sind, ähnlich wie auf einem Schachbrett.

Durch die Bearbeitung dieses Labs werden Sie praktische Erfahrungen mit CSS-Hintergründen, Gradienten und Mustererstellung sammeln - Fähigkeiten, die für moderne Webdesigns von großem Wert sind.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 80% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Verständnis der Projekt-Dateien

Bevor wir mit der Erstellung unseres Schachbrettmusters beginnen, lassen Sie uns die Projekt-Dateien untersuchen, die in der virtuellen Maschine (VM) bereitgestellt wurden.

Öffnen Sie die Datei index.html im Editor, indem Sie darauf im Datei-Explorer-Panel klicken.

Die ursprüngliche HTML-Datei sollte wie folgt aussehen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

Öffnen Sie nun die Datei style.css im Editor.

Die ursprüngliche CSS-Datei sollte leer sein oder nur minimale Stile enthalten:

/* CSS styles will be added here */

Lassen Sie uns unseren Entwicklungsserver starten, um den anfänglichen Zustand unserer Webseite zu sehen.

Um Ihre Webseite im Browser anzuzeigen, klicken Sie auf die Schaltfläche "Go Live" in der unteren rechten Ecke des Editors. Dadurch wird ein Live-Server gestartet und Ihre Webseite im Tab Web 8080 angezeigt.

Zu diesem Zeitpunkt sollten Sie eine leere Seite sehen, da wir noch keinen Inhalt oder Stile hinzugefügt haben.

Erstellen der HTML-Struktur

Nachdem wir nun die Projekt-Dateien verstanden haben, erstellen wir die HTML-Struktur für unser Schachbrettmuster.

Öffnen Sie erneut die Datei index.html im Editor.
Wir müssen ein Container-Element für unser Schachbrettmuster hinzufügen. Innerhalb des <body>-Tags ersetzen Sie den Kommentar durch ein <div>-Element mit der Klasse "checkerboard":

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Speichern Sie die Datei index.html, indem Sie Strg+S drücken oder auf Datei > Speichern klicken.
Fügen wir nun einige grundlegende CSS-Regeln hinzu, um die Abmessungen unseres Schachbretts zu definieren. Öffnen Sie die Datei style.css und fügen Sie den folgenden Code hinzu:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

Dieser CSS-Code macht Folgendes:

Setzt die Breite und Höhe unseres Schachbretts auf 240 Pixel
Setzt die Hintergrundfarbe auf Weiß (#fff)

Speichern Sie die Datei style.css.
Aktualisieren Sie den Tab Web 8080, um die Änderungen zu sehen.

Sie sollten jetzt ein weißes Quadrat mit einer Breite und Höhe von 240 Pixeln sehen. Dies wird die Leinwand für unser Schachbrettmuster sein.

Erstellen des ersten Farbverlaufs

Jetzt beginnen wir mit der Erstellung unseres Schachbrettmusters mithilfe von CSS-Farbverläufen. Fügen wir zunächst den ersten linearen Farbverlauf hinzu, um einen Teil des Musters zu erstellen.

Grundlagen zu linearen CSS-Farbverläufen

Mit linearen CSS-Farbverläufen können Sie sanfte Übergänge zwischen zwei oder mehr Farben in einer geraden Linie erstellen. Die Funktion linear-gradient() nimmt einen Winkel und eine Reihe von Farbpunkten (color stops) als Parameter. Wir werden diese Technik nutzen, um die Felder unseres Schachbretts zu gestalten.

Folgen Sie diesen Schritten:

Öffnen Sie die Datei style.css.
Modifizieren wir die .checkerboard-Klasse, um den ersten linearen Farbverlauf hinzuzufügen:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

Lassen Sie mich erklären, was dieser Farbverlauf bewirkt:

45deg gibt den Winkel des Farbverlaufs an.
#000 25% erzeugt eine schwarze Farbe von 0% bis 25% des verfügbaren Raums.
transparent 25% erzeugt eine transparente Farbe, die ab 25% beginnt.
transparent 75% behält die transparente Farbe bis 75% bei.
#000 75% wechselt ab 75% wieder zur schwarzen Farbe und setzt diese bis zum Ende fort.
background-size: 60px 60px legt die Größe jeder wiederholten Farbverlaufszelle fest.

Speichern Sie die Datei style.css.
Aktualisieren Sie den Tab Web 8080, um die Änderungen zu sehen.

Sie sollten jetzt ein Muster erkennen, das sich langsam bildet, aber es ist noch kein vollständiges Schachbrett. Der erste Farbverlauf erzeugt nur einen Teil des Musters. Im nächsten Schritt fügen wir einen zweiten Farbverlauf hinzu, um das Schachbrett zu vervollständigen.

Vervollständigung des Schachbrettmusters

Jetzt fügen wir den zweiten linearen Farbverlauf hinzu, um unser Schachbrettmuster abzurunden und es über das gesamte Element wiederholbar zu machen.

Öffnen Sie erneut die Datei style.css.
Modifizieren Sie die .checkerboard-Klasse, um einen zweiten linearen Farbverlauf hinzuzufügen, der das abwechselnde Muster erzeugt:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

Was wir hinzugefügt haben:

Einen zweiten linear-gradient(), der dem ersten ähnelt, aber mit einem Winkel von -45deg, um das abwechselnde Muster zu erzeugen
Die Eigenschaft background-repeat: repeat sorgt dafür, dass die Muster über das gesamte Element wiederholt werden

Die Kombination dieser beiden Farbverläufe in verschiedenen Winkeln erzeugt das klassische Schachbrettmuster. Der erste Farbverlauf erzeugt eine Reihe von diagonalen Quadraten, während der zweite Farbverlauf eine andere Reihe erzeugt, die die Lücken füllt.

Speichern Sie die Datei style.css.
Aktualisieren Sie den Tab Web 8080, um das endgültige Ergebnis zu sehen.

Sie sollten jetzt ein vollständiges Schachbrettmuster mit abwechselnden schwarzen und weißen Quadraten sehen. Das Muster sollte über das gesamte 240x240 Pixel große Element wiederholt werden.

Funktionsweise des Musters

Der Schachbretteffekt wird erzeugt, indem:

Zwei lineare Farbverläufe mit entgegengesetzten Winkeln (45deg und -45deg) verwendet werden
Jeder Farbverlauf ein Muster von schwarzen Quadraten in den Ecken erzeugt
Die transparenten Bereiche ermöglichen es, dass der weiße Hintergrund durchscheint
Die Eigenschaft background-size steuert die Größe jedes Quadrats im Muster
Die Eigenschaft background-repeat lässt das Muster über das gesamte Element wiederholen

Diese Technik zeigt die Stärke von CSS-Farbverläufen bei der Erstellung komplexer Muster ohne die Notwendigkeit von Bilddateien, was zu schnelleren Ladezeiten und besserer Skalierbarkeit führt.

Zusammenfassung

Herzlichen Glückwunsch, dass Sie das Lab "Schachbrett-Hintergrundmuster" abgeschlossen haben. In diesem Lab haben Sie:

Eine HTML-Struktur erstellt, um Ihr Schachbrettmuster anzuzeigen
Gelernt, wie Sie CSS-lineare Farbverläufe (linear gradients) nutzen, um Muster zu erstellen
Mehrere Farbverläufe in verschiedenen Winkeln kombiniert, um einen Schachbretteffekt zu erzielen
Größen- und Wiederholungseigenschaften (sizing and repeating properties) angewendet, um das Muster perfekt zu gestalten

Dieses Schachbrettmuster zeigt eine leistungsstarke CSS-Technik, die in vielen Webdesign-Projekten angewendet werden kann. Der von Ihnen gelernten Ansatz - die Verwendung von Farbverläufen anstelle von Bildern - führt zu schnelleren Ladezeiten und besserer Skalierbarkeit für Ihre Webseiten.

Sie können nun dieses Wissen nutzen, um andere Muster und visuelle Effekte mit CSS-Farbverläufen zu erstellen. Sie können versuchen:

Das Schachbrett in anderen Farben zu gestalten
Die Größe der Quadrate zu ändern
Die Farbverläufe in anderen Winkeln zu verwenden
Andere geometrische Muster wie Streifen oder Punkte zu erstellen

Die in diesem Lab gelernten Techniken bilden eine Grundlage für die Erstellung anspruchsvoller Hintergrundmuster mit reiner CSS.

Schachbrett-Hintergrundmuster