Horizontal Ruler: Zwei Styling-Tricks für individuelle Trennlinien

11. April 2021 | CSS-Stylesheet

Dieser Beitrag beinhaltet 541 Wörter. Geschätzte Lesezeit: ca. 3 Minuten.

Die Trennlinie – der Horizontal Ruler <hr> – kommt häufig auf Websites vor. Sie dient der Strukturierung und Übersicht, kommt aber in deren Grundausstattung eher dröge daher. Mit ein ganz klein bisschen CSS-Code können Sie die Trennlinien aber nett aufhübschen.

Die Trennline (oder der Horizontal Ruler <hr>) einer Website sieht standardmässig etwa so aus:


Wir haben sie mit CSS-Code gestylt und diesen Code im WordPress-Stylesheet (unter Design/Customizer/Zusätzliches CSS) hinterlegt:

Zu langweilig? Mit einer Handvoll Anpassungen lässt sich der Horizontal Ruler weiter individuell verändern. Hinterlegen Sie den gewünschten CSS-Code im WordPress-Stylesheet (unter Design/Customizer/Zusätzliches CSS):

Option 1: Trennlinie mit Farbverlauf

Statt einer simplen Farbe wie oben lässt sich auch mehrere Farben einsetzen. Dies kann etwa mit einem CSS-Code wie diesem erreicht werden:

hr{
border: 0;
height: 5px;
background-image: linear-gradient(to right,
rgba(0,0,0,0),
rgba(41,50,128,0,75),
rgba(0,0,0,0));
}
Das würde sich dann so präsentieren:


Das lässt sich auch weiter variieren: Lassen Sie etwa die Zeile 7 aus obigem Code weg, erhalten Sie dieses Resultat:


Oder Sie können in Zeile 5 und 7 den RGBA-Code für schwarz/transparent (rgba(0, 0, 0, 0)) mit rot/halb-transparent (rgba(255, 0, 0, 0.5)) ersetzen:


Die Möglichkeiten sind unbegrenzt.

Option 2: Trennlinie mit Hintergrundbild

Es geht aber noch individueller: Vielleicht führe ich einen Onlineshop für Obst. Dann könnte ich auch eine Trennlinie aus saftigen Äpfeln wollen. Dieser CSS-Code sähe dann so aus.

hr{
border: 0;
height: 35px;
background-image:url(https://dr-code.ch/wp-content/uploads/ruler-480x35.png);
}
  • Bei der Höhe auf Zeile 3 setzen Sie die Höhe Ihres Bildes in Pixel ein.
    Verwenden Sie hier eine kleinere Höhe als die Bildhöhe, würde es einfach abgeschnitten; bei einem höheren Wert würde es repetiert.
  • Die Datei-URL auf Zeile 4 müsste mit einem passenden Bild aus Ihrer Sammlung ersetzt werden.
    Das Bild muss auch nicht die gesamte Seitenbreite einnehmen. Es wird automatisch repetiert, bis der Ruler vollständig aufgefüllt ist.

Unser Beispiel würde jedenfalls folgende Trennlinie ergeben:


Man sieht: Der Horizontal Ruler <hr> bietet zahllose Möglichkeiten.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This