Farbiger Balken hinter Post-Titel
Um einen farbigen Balken, so wie hier bei irgendschoen, hinter dem Post-Titel zu haben, erfordert es nur wenige, einfache Schritte!
GRUNDSCHRITTE
1. .post h3 a im HTML-Code suchen.
2. Folgende Werte müssen sich zwischen den Klammern { } befinden bzw. reinkopiert werden:
background-color: #000000;
color: #ffffff;
display: inline;
color: #ffffff;
display: inline;
Eigentlich ist man hier fertig. Wer aber möchte, dass die Schrift des Titel-Links sich verändert, wenn man draufklickt, folgt Schritten 3 und 4.
3. .post h3 a:hover im HTML-Code suchen.
4. Folgende Werte müssen sich zwischen den Klammern { } befinden bzw. reinkopiert werden:
background-color: #000000;
color: #cccccc;
color: #cccccc;
Tipp! Bei farbigen Hintergründen am besten Schriften wie Arial, Verdana usw. nehmen. Schnörkelige Schriften lassen sich da nämlich sehr schlecht lesen.
BALKEN IN GANZER ZEILE
Wer in der ganzen Zeile einen Balken haben möchte, gibt bei display die Definition block statt inline ein.
BALKENHÖHE
Durch den Code line-height: 10px; kann man nun auch die Zeilenhöhe je nach Geschmack bestimmen. Anstelle der 10px probiert mal aus, wie es mit 12, 14, 16... px in Kombination mit der Größe euer Titelschrift ausschaut!
Ich hoffe, ich konnte dem ein oder anderen damit helfen! Bei Fragen zu diesem Tutorial überprüft bitte erst, ob ihr wirklich alle Schritte befolgt habt & fragt dann ggfs. in diesem Post.
Sehr cool :) Das wollte ich auch schon immer mal bei meinem Blog machen. Kennst du diese alten gedruckten Schilder? Bei denen die weiße schrift quasi aus dem schwarzen balken rausgedrückt wird. So etwas wollte ich mir mal machen. Hast du da Tipps für mich?
AntwortenLöschen@Mode.Karussell
AntwortenLöschenPuh, ich hoffe, ich weiß was du meinst :p Mit dem Code
text-shadow: 0px 1px 0px #ffffff;
kannst du solch einen ähnlichen Effekt erzielen (Werte sind nur beispielhaft).
Es "poppt" besser, wenn die Kontraste zwischen Schriftfarbe + Hintergrund zur Schattenfarbe größer sind! Beispiel:
# Hintergrund: schwarz
# Schrift: grau
# Schatten: weiß
Probier dich an den Pixel-Werten aus um zu schauen, was dir besser gefällt in Bezug auf Dicke des Schattens, Abstand usw. :)
wunderbar, wunderbar, es klappt! Jetzt ist nur mein Problem: Der Post-Titel hat schwarze schrift, der balken auch. Wie kann ich die Farbe der Postüberschrift in weiß umändern?
AntwortenLöschen:)
@U
AntwortenLöschenWenn du color: #ffffff bei post h3 a stehen hast, müsste es weiß werden. Wenn nicht, poste einfach mal den Link zu dem Blog, wo du das angewendet hast und ich schaue mal in den Quelltext :)