Kunst mit HTML und CSS ausgeben

Dazu braucht es ein einfaches Grundgerüst mit eingebundener CSS-Datei. Nenne deine HTML-Datei index.html und deine CSS-Datei style.css.

Beispielcode zum kopieren:

HTML-Code (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Abstraktes Kunstwerk von html-einfach.de</title>
</head>
<body>
  <div class="artwork">
    <div class="circle"></div>
    <div class="rectangle"></div>
    <div class="triangle"></div>
  </div>
</body>
</html>

CSS-Code (style.css):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.artwork {
  position: relative;
  width: 300px;
  height: 300px;
}

.circle,
.rectangle,
.triangle {
  position: absolute;
  opacity: 0.8;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rectangle {
  width: 200px;
  height: 50px;
  background-color: #28a745;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.triangle {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid #ffc107;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
}

Erklärung des Codes:

Der oben angegebene HTML- und CSS-Code erstellt ein abstraktes Kunstwerk aus geometrischen Formen. Der Code ist in zwei Hauptteile unterteilt: den HTML-Teil, der die Struktur der Webseite und die Elemente definiert, und den CSS-Teil, der das Aussehen und die Positionierung dieser Elemente steuert.

HTML-Code:

Im HTML-Code gibt es eine Haupt-<div> mit der Klasse „artwork„, die als Container für die geometrischen Formen dient. Innerhalb dieses Containers befinden sich drei weitere <div>-Elemente, die jeweils die Klassen „circle„, „rectangle“ und „triangle“ besitzen. Diese Klassen verweisen auf die jeweiligen CSS-Stile, die die Formen definieren.

CSS-Code:

Im CSS-Code werden zunächst allgemeine Stile für das gesamte Dokument festgelegt, wie zum Beispiel das Zurücksetzen von Standardabständen und das Anwenden der box-sizing-Eigenschaft auf alle Elemente. Anschließend wird der <body> so gestaltet, dass der „artwork“-Container zentriert angezeigt wird. Der „artwork“-Container hat eine feste Größe und positioniert seine inneren Elemente (die geometrischen Formen) relativ zu sich selbst.

Tipp: Spiele mit Farben um Aufmerksamkeit an die richtigen Stellen zu lenken: Webseite Farben

Die geometrischen Formen werden durch ihre jeweiligen CSS-Klassen und Stile definiert:

Der Kreis (circle) erhält seine runde Form durch die Anwendung der border-radius: 50%-Eigenschaft. Er wird in der Mitte des „artwork“-Containers positioniert, indem die top– und left-Eigenschaften jeweils auf 50% gesetzt und die transform: translate(-50%, -50%)-Eigenschaft angewendet wird.
Das Rechteck (rectangle) hat eine festgelegte Breite und Höhe. Es wird horizontal zentriert und in der Nähe des oberen Randes des „artwork“-Containers positioniert, indem die left-Eigenschaft auf 50% gesetzt und die transform: translateX(-50%)-Eigenschaft angewendet wird.
Das Dreieck (triangle) wird erstellt, indem die border-Eigenschaft verwendet wird, um die Größe und Farbe des Dreiecks zu definieren. Es wird ähnlich wie das Rechteck horizontal zentriert, jedoch näher am unteren Rand des „artwork“-Containers positioniert.

Die verschiedenen Formen haben unterschiedliche Farben und eine leicht reduzierte Deckkraft (0,8), um ein abstraktes und interessantes visuelles Erscheinungsbild zu erzeugen. Du kannst diese Codebasis verwenden, um dein eigenes Kunstwerk zu erstellen, indem du die Größen, Farben und Positionen der Formen änderst oder weitere Formen hinzufügst. Du kannst auch CSS-Animationen und -Übergänge verwenden, um Bewegung und Interaktivität hinzuzufügen.

Impuls für Kreative: Du kannst auch Animationen mit CSS in HTML einbinden.

Beispielcode zum kopieren:

Erklärung des Codes:

Kommentar verfassen