Mit CSS Border-Radius abgerundete Ecken erstellen

Einführung

In diesem Lab werden die Teilnehmer die leistungsstarke CSS-Eigenschaft border-radius erkunden, um visuell ansprechende abgerundete Ecken auf Web-Elementen zu erstellen. Mit einem schrittweisen Ansatz beginnen die Lernenden mit der Einrichtung eines grundlegenden HTML-Dokuments und wenden schrittweise verschiedene border-radius-Techniken an, um zu verstehen, wie man die Elementecken dynamisch manipulieren kann.

Das Lab behandelt grundlegende Fertigkeiten wie das Erstellen von einheitlichen abgerundeten Ecken, das Anwenden unterschiedlicher Radien auf einzelne Ecken und das Experimentieren mit border-radius-Variationen. Indem die Studierenden an praktischen Beispielen arbeiten, werden sie praktische Erfahrungen bei der Verwendung von CSS sammeln, um eckige div-Elemente in glatte, abgerundete Designkomponenten zu verwandeln und dieästhetische Attraktivität von Web-Schnittstellen zu verbessern.

HTML-Dokument einrichten

In diesem Schritt werden Sie das grundlegende HTML-Dokument für die Exploration der CSS-Eigenschaft border-radius einrichten. Wir werden eine einfache HTML-Datei erstellen, die als Grundlage für unsere CSS-Stilexperimente dienen wird.

Öffnen Sie die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei namens index.html, indem Sie im Dateiexplorer mit der rechten Maustaste klicken und "Neue Datei" auswählen.

Kopieren Sie und fügen Sie die folgende HTML-Struktur in die Datei index.html ein:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Border-Radius Exploration</title>
    <style>
      /* Wir werden unsere CSS-Stile in den nächsten Schritten hier hinzufügen */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border-Radius Examples</h1>
      <!-- Wir werden unsere div-Elemente in den nächsten Schritten hier hinzufügen -->
    </div>
  </body>
</html>

Dieses grundlegende HTML-Dokument bietet eine einfache Struktur für unsere CSS-border-radius-Exploration. Betrachten wir die wichtigsten Komponenten:

Die Deklaration <!DOCTYPE html> gewährleistet, dass der Browser das neueste HTML-Standard verwendet
Die <meta>-Tags helfen bei der Zeichensatzkodierung und der responsive Gestaltung
Wir haben ein internes <style>-Tag enthalten, in dem wir unsere CSS in späteren Schritten hinzufügen werden
Der <body> enthält ein Container-div, den wir für unsere Beispiele verwenden werden

Beispielausgabe, wenn Sie diese Datei in einem Browser öffnen:

CSS Border-Radius Examples

Speichern Sie die Datei und stellen Sie sicher, dass sie sich im Verzeichnis ~/project/index.html befindet.

Grundlegende Border-Radius-Eigenschaft auf ein Div-Element anwenden

In diesem Schritt lernen Sie, wie Sie die grundlegende border-radius-Eigenschaft anwenden, um abgerundete Ecken auf einem Div-Element zu erstellen. Die border-radius-Eigenschaft ermöglicht es Ihnen, auf HTML-Elementen leicht glatte, abgerundete Ecken zu erzeugen.

Öffnen Sie die Datei index.html in der WebIDE. Fügen Sie innerhalb des <style>-Tags die folgende CSS hinzu, um ein grundlegendes Div mit abgerundeten Ecken zu erstellen:

<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px;
  }
</style>

Fügen Sie nun ein Div mit der Klasse rounded-box innerhalb des <body>-Abschnitts Ihres HTML hinzu:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>
  </div>
</body>

Betrachten wir die CSS-Eigenschaften:

width und height legen die Größe des Div fest
background-color gibt dem Div eine einfarbige Hintergrundfarbe
border-radius: 20px erzeugt abgerundete Ecken mit einem Radius von 20 Pixeln
margin fügt etwas Leerraum um das Div hinzu

Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie einen blauen Quadrat mit abgerundeten Ecken. Die border-radius-Eigenschaft wendet eine gleiche Krümmung auf alle vier Ecken des Div an.

Beispielhafte visuelle Ausgabe:

+--------------------+
|                    |
|   Blauer Kasten mit |
|   abgerundeten Ecken|
|                    |
+--------------------+

Experimentieren Sie, indem Sie den border-radius-Wert ändern, um zu sehen, wie sich dies auf die Eckkrümmung auswirkt. Versuchen Sie Werte wie 10px, 50px oder sogar 100px, um verschiedene Abrundungseffekte zu sehen.

Div mit unterschiedlichen Eckradien erstellen

In diesem Schritt lernen Sie, wie Sie Divs mit unterschiedlichen Eckradien erstellen, um mehr Kontrolle über die Abrundung einzelner Ecken zu haben. Die border-radius-Eigenschaft kann verwendet werden, um einzigartige und interessante Formen zu erzeugen.

Aktualisieren Sie den <style>-Abschnitt in Ihrer index.html-Datei mit der folgenden CSS:

<style>
  .different-corners {
    width: 250px;
    height: 200px;
    background-color: #2ecc71;
    margin: 20px;
  }

  .top-left-corner {
    border-top-left-radius: 50px;
  }

  .bottom-right-corner {
    border-bottom-right-radius: 30px;
  }

  .mixed-corners {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 60px;
  }
</style>

Fügen Sie nun die entsprechenden Divs in Ihren HTML-Body hinzu:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>

    <div class="different-corners top-left-corner"></div>
    <div class="different-corners bottom-right-corner"></div>
    <div class="different-corners mixed-corners"></div>
  </div>
</body>

Betrachten wir die unterschiedlichen border-radius-Anwendungen:

border-top-left-radius: 50px rundet nur die obere linke Ecke
border-bottom-right-radius: 30px rundet nur die untere rechte Ecke
Das mixed-corners-Div zeigt, wie Sie unabhängig voneinander unterschiedliche Radien für jede Ecke festlegen können

Beispielhafte visuelle Ausgabe:

+--------------------+
|  Grüner Kasten mit  |
|  variierten Eck    |
|  Abrundungen       |
+--------------------+

Experimentieren Sie, indem Sie die Pixelwerte ändern, um zu sehen, wie unterschiedliche Eckradien einzigartige Formen erzeugen. Sie können verschiedene Einheiten wie Pixel (px), Prozent (%) verwenden oder sogar unterschiedliche Werte für horizontale und vertikale Radien verwenden.

Einzelne Eckradius-Eigenschaften erkunden

In diesem Schritt werden Sie tiefer in die einzelnen Eckradius-Eigenschaften eintauchen und lernen, wie Sie mit unterschiedlichen Einheiten und Techniken komplexere und präzisere abgerundete Ecken erstellen.

Aktualisieren Sie den <style>-Abschnitt in Ihrer index.html-Datei mit der folgenden CSS:

<style>
  .individual-radius {
    width: 300px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px;
  }

  .elliptical-corners {
    border-top-left-radius: 50px 25px;
    border-top-right-radius: 25px 50px;
    border-bottom-right-radius: 40px 20px;
    border-bottom-left-radius: 20px 40px;
  }

  .percentage-corners {
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
</style>

Fügen Sie die entsprechenden Divs in Ihren HTML-Body hinzu:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="individual-radius elliptical-corners"></div>
    <div class="individual-radius percentage-corners"></div>
  </div>
</body>

Lassen Sie uns die neuen border-radius-Techniken erkunden:

Elliptische Ecken:
- Verwenden Sie für jede Ecke zwei Werte: border-radius: horizontal-radius vertical-radius
- Erstellt eine ellipsenartige Kurve anstelle eines perfekten Kreises
- Beispiel: border-top-left-radius: 50px 25px erstellt eine asymmetrische Kurve
Prozent-basierte Ecken:
- Verwenden Sie Prozentangaben, um responsive, proportionale Eckradien zu erstellen
- border-top-left-radius: 30% rundet die Ecke basierend auf der Größe des Elements
- Ideal für das Erstellen adaptiver Designs

Beispielhafte visuelle Ausgabe:

+--------------------+
|  Rote Boxen mit   |
|  einzigartigen Eck |
|  Abrundungen       |
+--------------------+

Experimentieren Sie, indem Sie die Radiuswerte und -einheiten ändern, um zu sehen, wie sich dies auf das Aussehen des Elements auswirkt.

Experimentieren mit Border-Radius-Variationen

In diesem letzten Schritt werden Sie fortgeschrittene Border-Radius-Techniken erkunden, mit denen Sie mit CSS einzigartige und kreative Formen erstellen können. Wir werden demonstrieren, wie border-radius verwendet werden kann, um komplexe geometrische Designs zu erzeugen.

Aktualisieren Sie den <style>-Abschnitt in Ihrer index.html-Datei mit der folgenden CSS:

<style>
  .creative-shapes {
    width: 250px;
    height: 250px;
    margin: 20px;
    background-color: #9b59b6;
  }

  .circle {
    border-radius: 50%;
  }

  .leaf-shape {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .complex-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
</style>

Fügen Sie die entsprechenden Divs in Ihren HTML-Body hinzu:

<body>
  <div class="container">
    <h1>CSS Border-Radius Creative Shapes</h1>
    <div class="creative-shapes circle"></div>
    <div class="creative-shapes leaf-shape"></div>
    <div class="creative-shapes complex-shape"></div>
  </div>
</body>

Lassen Sie uns diese kreativen Border-Radius-Variationen erkunden:

Perfekter Kreis:
- Verwenden Sie border-radius: 50%, um einen perfekten Kreis zu erstellen
- Funktioniert, indem der Radius halb der Breite/Höhe des Elements entspricht
Blatt-ähnliche Form:
- Wählen Sie gezielt bestimmte Ecken abzurunden, um organische Formen zu erzeugen
- border-top-left-radius: 50% erzeugt eine abgerundete Ecke
Komplexe asymmetrische Form:
- Verwenden Sie die fortgeschrittene Syntax border-radius: horizontal / vertical
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% erzeugt eine einzigartige, asymmetrische Form

Beispielhafte visuelle Ausgabe:

+--------------------+
|  Lila Formen      |
|  mit kreativem    |
|  Border-Radius    |
+--------------------+

Experimentieren Sie, indem Sie die Prozentwerte ändern und beobachten, wie sich dies die Form des Elements ändert.

Zusammenfassung

In diesem Lab lernen die Teilnehmer, wie sie mit den CSS-Border-Radius-Eigenschaften Schritt für Schritt abgerundete Ecken erstellen. Das Lab beginnt mit der Einrichtung eines grundlegenden HTML-Dokuments mit einem internen Styling-Tag, was die Grundlage für CSS-Styling-Experimente liefert. Die Teilnehmer beginnen mit der Erstellung einer einfachen HTML-Struktur und wenden dann sukzessive Border-Radius-Techniken auf Div-Elemente an.

Die Lernreise umfasst das Anwenden der grundlegenden Border-Radius, um glatte Ecken zu erstellen, das Experimentieren mit unterschiedlichen Eckradien und das Erkunden der einzelnen Eckradius-Eigenschaften. Indem sie praktische Beispiele durcharbeiten, gewinnen die Teilnehmer praktische Erfahrungen bei der Manipulation von Elementformen mit CSS und verstehen, wie Border-Radius die visuelle Erscheinung von Webseite-Elementen mit einfachen und intuitiven Styling-Techniken verändern kann.