bloggertipps #1

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;

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;

Natürlich dann noch das übliche Rumspielen mit Farben, Schriften usw.!

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. 

Bitte habt Verständnis dafür, dass ich keine Zeit habe für Nachfragen wie "Hilfst du mir mit meinem Layout?" oder "Erklärst du mir HTML?". Meine Bloggertipps entstehen durch mehrfache Anfragen zu demselben Thema, oder, weil ich finde, ein interessanter Effekt müsste erklärt werden.  

Kommentare:

  1. 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
  2. @Mode.Karussell
    Puh, 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. :)

    AntwortenLöschen
  3. 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
  4. @U
    Wenn 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 :)

    AntwortenLöschen

Freue mich immer über Kommentare zu meinen Posts :)♥ Beantworte sie auch in der Regel alle, jedoch nur hier im Post selber.
//
ACHTUNG - Kommentare mit Werbungsinhalt (Blogvorstellungen, Shops, sonstige Aktionen) werden grundsätzlich nicht veröffentlicht!