Klar wünschen wir uns immer die beste Kamera, das schönste Model, die perfekte Lichtanlage, am liebsten würden wir gern selbst professionelle Fotos erstellen.
In vielen Fällen bekommen wir aber eher Bilder von unseren Kunden gestellt - teils auch noch aus analogen Zeiten.
» zum kompletten Artikel »
Die Zoom-Funktion, welche unter den »Bedienungshilfen« in den OS X Systemeinstellungen zu finden ist, ist sicherlich den meisten bekannt.
Die Tastenkombinationen um die Zoom-Funktionen zu nutzen, sind allerdings gewöhnungsbedürftig und gehen nicht schnell genug von der Hand.
» zum kompletten Artikel »
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.
Dies störte mich zunehmends, so daß ich mir überlegte, es müsse doch möglich sein, das jeweilige Dokument in passender Druckgröße am Bildschirm anzeigen zu lassen.
» zum kompletten Artikel »
Der Ausbau von Webstandards in Deutschland ist das Ziel der Webkrauts. Seit heute gibt es dort einen Artikel, über Überschriften in standardkonformen Webseiten zu lesen, den ich letzte Woche verfasst habe:
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…
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.
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.
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!
