Bei der Gestaltung moderner Webseiten stellt der richtige Einsatz von Headlines einen wichtigen Aspekt dar. Nach der Wahl eines passenden <h> Elementes, beschränkt sich das Styling mit CSS meist auf Font, Farbe und Größe der Headline. Was darüber hinaus möglich ist, zeigt Alexander Hahn in diesem Praxis-Artikel.
Ich habe unzählige Anregungen zu meinem Beitrag über die Formatierung einfacher CSS Buttons mit der sliding doors Technik bekommen, daraufhin begann ich über ansprechende Formatierungen von Überschriften nachzudenken, welche auf einfache Weise auch auf andere Elemente angewendet werden können.
Alle Dateien können am Ende des Tutorials heruntergeladen werden, zudem habe ich eine Testseite mit mehreren Beispielen eingerichtet.
Headline Variante Nr.01
Anforderung an alle Überschriften ist es, dass sie bei Änderung des Textzooms mitwachsen und auch in flexiblen/fluiden Layouts funktionieren.
Zunächst weise ich dem <h2> Element ein paar Grundeigenschaften zu:
<h2>HEADLINE STYLING</h2>
h2{
font: 1.4em Georgia,serif;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
color: #58583b;
/* Die Hintergrundgrafik dient zum hinterlegen der Headline */
background: url(images/line01.gif) repeat-x 0 50%;
}
Die daraus resultierende Übeschrift hat nun eine vertikal zentrierte Linie zugewiesen bekommen, welche sich über den gesamten Inhaltsbereich erstreckt, da <h> ein Blocklevel Element darstellt.
Problem: Die Überschrift wird durch die Hintergrundgrafik durchgestrichen.
Um die Überschrift auf der Hintergrundfarbe stehen zu lassen, fügen wir ihr ein <span>-Tag hinzu, welchem ein seitliches padding und die passende Hintergrundfarbe zugewiesen wird.
<h2><span>HEADLINE STYLING</span></h2>
h2 span {
padding: 0 4px;
background: #F5F5DF;
}
erste Headline Variante
Diese Variante einer Überschrift ist in praktisch allen Layouts einsetzbar und passt sich dem jeweiligen Inhaltscontainer an.
Headline Variante Nr.02
Das Spiel mit <span>-Tags kann für weitere Formatierungen genutzt werden, im folgenden möchte ich der Überschrift jeweils rechts und links Sterne hinzufügen, welche beim Zoom des Textes mitwandern.
<h2 class=”stars”><span><span>HEADLINE STYLING</span></span></h2>
Achtung: Die Formatierung mittels Klassen verwende ich in den Beispielen nur, um die verschiedenen Überschriften parallel in einer Beispielseite darstellen zu können. Zudem können bei der Verwendung von nur einer Headline Variante einige CSS Formatierungen verkürzt werden.
h2.stars {
letter-spacing: 0px;
font-size: 1.2em;
}
h2.stars span { /* Stern für die linke Seite */
padding: 0 0 0 20px;
background: #F5F5DF url(images/star.gif) no-repeat left center;
}
h2.stars span span { /* Stern für die rechte Seite */
padding: 0 20px 0 0;
background: transparent url(images/star.gif) no-repeat right center;
}
zweite Headline Variante
Headline mit 200% Textzoom
Fazit: Durch die Verwendung von verkraftbar wenig Markup ist es auf einfache Weise möglich, kreative Überschriften zu formatieren. Ein wenig CSS und ein paar kleine Grafiken können somit aus einer einfachen Überschrift, eine Headline mit großen Wiedererkennungswert schaffen. Dabei geht es in keinster Weise um die Optik, für die ich mich in den Beispielen entschieden habe, eine Headline muss sich immer gut in den Gesamtaufbau des Layouts einfügen.
Ich wünsche viel Spaß beim ausprobieren und freue mich über Feedback jeglicher Art!
Tutorial Dateien herunterladen
…ja, denn ich 
Oh, das ging schnell, das kommt für mich unerwartet und ich weiß gerade nicht so recht wie ichs finde, aber ich installiere gerade die erste Beta Version des neuen IE8 .
Sobald es bei mir um »Print« geht, muss ich alle 2 Minuten einen Ausdruck starten, um mir über Größenverhältnisse im Klaren zu sein.
