Trick # 497 | Dieser Beitrag beinhaltet 586 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Wichtige Textpassagen können Sie augenfällig unterstreichen – mit einer kleinen Grafik, die dann exakt unter den hervorzuhebenden Text platziert wird. Wie das geht, zeigen wir in diesem Trick aus der Dr.-Code-Praxis.
Die wichtigen Textpassagen, welche wir besonders kennzeichnen möchten, unterlegen wir mit einer selbst erstellten Grafik. So sieht sie aus:
Selbstverständlich können Sie gleich diese Grafik verwenden – Sie können sie hier herunterladen. Oder Sie basteln sich eine eigene Grafik. Die Grafik fügen Sie anschliessend Ihrer Mediathek hinzu.
Nun benötigen Sie etwas CSS-Code. Kopieren Sie den folgenden Block und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
.sketch-underline {
background: url(https://ihre-domain.ch/PFAD-ZU-IHRER-BILDDATEI.png) bottom left no-repeat;
background-size: 100% 10px;
padding-bottom: 8px;
}In Zeile 2 müssen Sie natürlich anstelle des Platzhalter-Textes den Pfad zu Ihrer Grafikdatei eintragen.
Der Code spricht die CSS-Klasse sketch-underline an. Um den Unterstreich-Effekt zu erzielen, müssen Sie diesen Klassennamen an der gewünschten Stelle (am besten mit dem <span>-Tag) eintragen. Zum Beispiel so:
Bei Dr. Code gibt es <span class="sketch-underline" style="color: #293280;"><strong>die besten Tipps & Tricks</strong></span> aus der WordPress- und Divi-Praxis.Der Beispielsatz ergibt in Kombination mit obigem CSS-Code folgende Ansicht:
Bei Dr. Code gibt es die besten Tipps & Tricks aus der WordPress- und Divi-Praxis.
Mit hübsch und individuell hervorgehobenem Text.
Links individuell markieren
Selbstverständlich können Sie auch Links auf diese Weise unterstreichen. Der CSS-Code bleibt identisch. Der HTML-Code sähe dann z.B. so aus:
Wir zeigen Ihnen gerne, <a class="sketch-underline" style="color: #293280; text-decoration: none;" href="#"><strong>dass sich auch dieser Link</strong></a> mit der Grafik aufhübschen lässt.Das ergibt dann diese Ansicht:
Wir zeigen Ihnen gerne, dass sich auch dieser Link mit der Grafik aufhübschen lässt.
Werbung
Werbung
