Trick # 522 | Dieser Beitrag beinhaltet 599 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das <hr>-Element des HTML-Codes ergibt normalerweise eine Trennlinie, welche grau und auf der gesamten Anzeigebreite dargestellt wird. Doch dieser Horizontal Ruler <hr> lässt sich auch als Akzent einsetzen. Im heutigen Tipp ein paar Beispiele.
Nun ja: Der Horizontal Ruler <hr> ist von Natur aus recht unspektakulär:
Aber hier geht freilich mehr: Denn das <hr>-Element lässt sich ganz vorzüglich für Akzente einsetzen – man muss ihm bloss eine CSS-Klasse zuweisen. Doch alles der Reihe nach.
Zunächst benötigen Sie die CSS-Stylings, wie wir sie im folgenden Beispiel aufbereitet haben. Diesen Block können Sie kopieren und Ihrem CSS-Stylesheet – im WordPress-Backend etwa unter Design/Customizer/Zusätzliches CSS – hinzufügen:
hr.line-blue-left {
border: 0;
height: 5px;
background-color: #293280;
width: 66px;
margin-left: 0px;
}hr.line-black-center {
border: 0;
height: 3px;
background-color: #000000;
width: 166px;
}hr.line-green-right {
border: 0;
height: 5px;
background-color: #59B14B;
width: 66px;
margin-right: 0px;
}Die Farben und Darstellungsbreiten, sowie die Höhe der dargestellten Linie können Sie natürlich frei anpassen.
In unserem Beispiel verwenden wir drei verschiedene Darstellungen. Die Linie wird als HTML-Code in Ihrem Editor eingefügt. Wechseln Sie dazu in die HTML- oder Textansicht des Editors. Für die untenstehenden Blöcke haben wir folgende HTML-Codes verwendet:
<hr class="line-blue-left" /><hr class="line-black-center" /><hr class="line-green-right" />
Dies wird in unserem Fall so dargestellt:
Lorem ipsum dolor
Sit amet consetetur
Sadipscing elitr sed
Soweit drei Varianten – der Fantasie sind aber natürlich keine Grenzen gesetzt.
Werbung
Werbung
