Trick # 93 | 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 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
