Erstellung horizontaler Linien mit HTML und CSS: Ihr umfassender Guide

Grundlagen horizontaler Linien in HTML

Visuell ansprechende Websites zu erstellen erfordert das Verständnis grundlegender HTML-Elemente. Der <hr>-Tag erzeugt einen thematischen Umbruch zwischen Inhaltsbereichen.

<hr>

Personalisierung mit CSS

Der <hr>-Tag dient als Basis — CSS-Styling transformiert sein Aussehen.

Dicke und Farbe anpassen

hr {
  border: none;
  height: 2px;
  color: #333;
  background-color: #333;
}

Die Eigenschaft border: none; ist nötig, um den Standard-Stil zu überschreiben.

Einsatzbereiche

• Blog-Beiträge: Verschiedene Inhaltsbereiche visuell trennen
• Footer-Separator: Inhalte als Styling-Element betonen
• Seitenleisten und Produktbeschreibungen: Abschnittsenden signalisieren

5 CSS-Beispiele

1. Farbige Linie

hr {
  border: none;
  height: 2px;
  background-color: #ff0000;
}

2. Gepunktete Linie

hr {
  border-top: 1px dotted #0000ff;
}

3. 3D-Effekt mit Schatten

hr {
  border: none;
  height: 1px;
  background-color: #000;
  box-shadow: 0 0 10px #000;
}

4. Gestrichelte Linie

hr {
  border-top: 1px dashed #008000;
}

5. Farbverlauf-Linie

hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, #f09, #3023AE);
}

Fazit

Diese Beispiele zeigen, wie horizontale Linien die Ästhetik und Nutzererfahrung von Webseiten verbessern können. Experimentieren Sie mit verschiedenen Stilen, um das beste Ergebnis für Ihr Design zu erzielen.