Trennlinien mit CSS gestalten

Trennlinien setzt man im Grunde genommen häufig für viele Dinge ein. Sei es entweder als zusätzliches Style Element, oder um gewisse Bereiche auf einer Website voneinander zu trennen. Diese Trennlinien müssen jedoch nicht immer grau sein. Du kannst dabei sehr einfach und vielfältig die Trennlinien mit CSS gestalten.

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

 

Trennlinien mit CSS gestalten und anpassen

Ich zeige dir nun ein kleines Beispiel, wie du dabei eine Trennlinie mit CSS gestalten könntest.

 

Beispiel:

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

 

Erklärung:

Mit diesen CSS Attributen erzeugst du dabei eine „Trennlinie“ mit den folgenden Eigenschaften:

  • 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 somit völlig freie Hand, was die Gestaltung der Trennlinien angeht. Maßgeblich sind die dabei CSS Eigenschaften, die Ausrichtung, Abstand, Rahmen und Positionierung von Elementen steuern. Schaue dir hierzu doch das CSS-Tutorial für weitere Informationen an.

Eine Trennlinie muss überdies auch nicht immer horizontal sein. Du kannst ebenso einfach auch senkrechte Trennlinien mit CSS erstellen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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