English Version

Das HTML-Element hr (horizontal rule) wird auf Webseiten verwendet, um eine visuelle Trennung zwischen zwei Bereichen zu erreichen.
Für diesen Zweck genügt eine einfache Gestaltung der Trennlinien (s. Beispiele hier). Man kann jedoch das hr-Element dazu nutzen, gestalterische Effekte zu erzielen, die eine Webseite auflockern oder Inhalte unterstreichen.

Im folgenden Artikel zeige ich verschiedene Möglichkeiten, wie man das hr-Element attraktiv designen kann. Dazu wende ich die CSS-Eigenschaft background-image an, mit der unendlich viele Designs möglich sind.

Ich werde die einzelnen hr-Elemente in drei verschiedenen Höhen darstellen: 10px, 20px und 50 px, um unterschiedliche Effekte zu erzielen.

Als Basis für das hr-Element vergebe ich dem hr-Element die CSS-Klasse .hr-basic, wobei kein Rahmen vergeben wird und der border-radius 5 Pixel betragen soll:

.hr-basic {
  border: none;
  border-radius: 5px;
}

1. Trennlinie mit linear-gradient

Lineare Gradienten ermöglichen eine Fülle von Varianten für die Gestaltung von Trennlinien. Ich habe mich hier für eine gestreifte Linie entschieden in den Farben Blau und Grau.

Trennlinie mit linear-gradient - 10px Höhe

Trennlinie mit linear-gradient - 20px Höhe

Trennlinie mit linear-gradient - 50px Höhe

Der HTML-Code für die folgenden Beispiele mit unterschiedlicher Höhe der hr-Elemente:

<hr class="hr-basic linear-min">
<hr class="hr-basic linear">
<hr class="hr-basic linear-max">

Der CSS-Code sieht so aus:

hr.linear {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: linear-gradient(135deg, #4D4D4D 25%, #0000FF 25%, #0000FF 50%, #4D4D4D 50%, #4D4D4D 75%, #0000FF 75%, #0000FF 100%);
  background-size: 2rem 2rem;
}

Nach diesem Schema kreiere ich nun sechs weitere Beispiele für das Design der hr-Elemente.

2. Trennlinie mit repeating-linear-gradient

Mit der CSS-Funktion repeating-linear-gradient() erzeuge ich horizontale Linien, mit denen ein Jalousie-Effekt hervorgerufenn wird.

Trennlinie mit repeating-linear-gradient - 10px Höhe

Trennlinie mit repeating-linear-gradient - 20px Höhe

Trennlinie mit repeating-linear-gradient - 50px Höhe

Der CSS-Code:

hr.repeating-linear {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: repeating-linear-gradient(#ADD8E6, #ADD8E6 .125rem, #008000 .125rem , #008000 .25rem);
  background-size: 2rem 2rem;
}

3. Trennlinie mit repeating-radial-gradient

Mit der CSS-Funktion repeating-radial-gradient() werden kreisförmige Gradienten erzeugt, die ähnlich funktionieren wie die linearen Gradienten. Im fogenden Beispiel wende ich eine einfache CSS-Funktion an:

Trennlinie mit repeating-radial-gradient - 10px Höhe

Trennlinie mit repeating-radial-gradient - 20px Höhe

Trennlinie mit repeating-radial-gradient - 50px Höhe

hr.radial {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: repeating-radial-gradient(#BFBFBF, #A52A2A 20%);
  background-size: 20px 20px;
}

4. Trennlinie mit repeating-radial-gradient circle

Fügt man zu der CSS-Funktion repeating-radial-gradient() circle hinzu, erhält man einen Zielscheiben-Effekt.

Trennlinie mit repeating-radial-gradient circle - 10px Höhe

Trennlinie mit repeating-radial-gradient circle - 20px Höhe

Trennlinie mit repeating-radial-gradient circle - 50px Höhe

Der CSS-Code sieht folgendermaßen aus:

hr.radial-circle {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: repeating-radial-gradient(circle at 50%, #4D4D4D, #4D4D4D .5rem, #0000FF .5rem, #0000FF 1rem);
  background-size: 30px 20px;
}

Eleganter und präziser geht es mit Hintergrundbildern. Für diese Methode möchte ich drei weitere Beispiele zeigen.

5. Trennlinie mit SVG-Hintergrundbild (Inline-CSS)

Hier wähle ich eine Wellenlinie als SVG-Hintergrundbild; die Hintergrundfarbe ist eine dunkles Grün. Die Farbe und Breite der Wellenlinien wird festgelegt über stroke='%23222' stroke-width='10' innerhalb der CSS-Eigenschaft background-image.

Die Größe des SVG-Hintergrundbildes beträgt 25 Prozent, damit die Wellenlinien schön zur Geltung kommen.

Trennlinie mit SVG-Hintergrundbild Welle (Inline-CSS) - 10px Höhe

Trennlinie mit SVG-Hintergrundbild Welle (Inline-CSS) - 20px Höhe

Trennlinie mit SVG-Hintergrundbild Welle (Inline-CSS) - 50px Höhe

Der entsprechende CSS-Code:

hr.svg-intern {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-color: #008000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25%;
}

6. Trennlinie mit SVG-Hintergrundbild

Als weiteres Beispiel für SVG-Hintergrundbilder nehme ich diesmal ein externes SVG-Bild. Dafür verwende ich das aus dem Dart bekannte Bull's eye - das Zentrum einer Dartscheibe.

Trennlinie mit SVG-Hintergrundbild Bull's Eye - 10px Höhe

Trennlinie mit SVG-Hintergrundbild Bull's Eye - 20px Höhe

Trennlinie mit SVG-Hintergrundbild Bull's Eye - 50px Höhe

Der Code für dieses Beispiel ist recht schlicht:

hr.svg-extern {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: url(img/bulls-eye.svg);
  background-size: contain;
  border: 1px solid #333;
}

7. Trennlinie mit JPG-Hintergrundbild

Als letztes Beispiel für die Gestaltung des hr-Elements via CSS füge ich ein JPG-Bild in den CSS-Code ein. Ich nutze zu diesem Zweck Bilder von fiktiven Personen, die für ein Team stehen sollen.

Trennlinie mit JPG-Hintergrundbild Team - 10px Höhe

Trennlinie mit JPG-Hintergrundbild Team - 20px Höhe

Trennlinie mit JPG-Hintergrundbild Team - 50px Höhe

Der Code für dieses Beispiel ist ebenso einfach und übersichtlich wie das vorhergehende:

hr.team {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: url(img/team.jpg);
  background-size: contain;
  border: 1px solid #333;
}

Diese Beispiele mögen als Anregung für eigene weiterführende Experimente dienen; viel Spaß beim Coden wünscht

Rüdiger Alte