Trennlinien mit CSS gestalten

Trennlinien werden im Internet häufig eingesetzt. Sei es als zusätzliches Style-Element, oder um gewisse Bereiche auf einer Webseite voneinander abzutrennen. Diese Trennlinien müssen nicht immer standardmäßig grau sein. Mit Hilfe von CSS lassen sich die Trennlinien sehr einfach und vielfältig gestalten.

Welche Möglichkeiten es gibt, erfährst du im folgenden Abschnitt.

 

Beispiel:

<hr style="width:500px; color:blue; background-color:red; height:10px; margin-right:0; text-align:right; border:5px dotted darkgreen;">

 

Erläuterung:

Mit diesen CSS-Attributen würdest du eine „Trennlinie“ mit den folgenden Eigenschaften erzeugen:

  • Breite: 500 Pixel
  • Höhe: 10 Pixel
  • Ausrichtung: Rechtsbündig
  • Trennlinien-Farbe: Blau
  • Füllfarbe: Rot
  • Rahmenfarbe: Grün
  • Rahmenart: Gepunktet
  • Rahmendicke: 5 Pixel

 

Mit CSS hast du völlig freie Hand, was das Gestalten der Trennlinien angeht. Maßgeblich für die Gestaltung der Trennlinie sind die CSS-Eigenschaften zur Ausrichtung, zum Außenrand und Abstand zu anderen Elementen, zum Rahmen und zur Positionierung und Anzeige von Elementen. Schaue dir doch das CSS-Tutorial für weitere Informationen an.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.