transparente Überschriften
Als ich mir damals Gedanken machte, wie die neue Gestaltung werden soll, fand sich im cssZengarden dieses Juwel. Scrollt man diese Seite etwas, wird man schnell sehen worum es hier geht. Das Ganze ist also nicht meiner Feder entsprungen, aber ich fand das damals so gelungen, dass ich diese Methode für meine neue Version dieser Seite verwenden wollte. Schnell war eine Testseite zusammen gestellt. Es gibt also wieder mal ein winziges neues Tutorial.
Beeindruckend finde ich dabei, dass wir hier eine ehemals mies geschriebenes Merkmal, von tabellenlosem Design (“boxy”) ganz geschickt in Anwendung sehen. Wie funktioniert es also?
Die Überschriftenblöcke besitzen keinen Hintergrund, sind also transparent. Die Blöcke der p-Tags dagegen sind klar mit einer Hintergrundfarbe definiert. Was nun noch fehlt ist eine zusätzliche Ebene (DIV), die das Bild als Hintergrundgrafik definiert bekommt. Einfach ausgedrückt funktioniert das h-Tag der Überschrift, als Maske für das drunter liegende Bild.
<div id="pic"> <p>...</p> <h1>...</h1> <p>...</p> </div>
Grundsätzlich müssen alle Elemente die gleiche Breite besitzen, den Rest erledigen die Hintergründe der Blöcke.
div#pic {background: #fff url('mc2.jpg') repeat-y fixed center top;}
p {background: #fff;}
h1 {background: transparent;}
Die Magie des Ganzen verursacht das fixed des Hintergrundbildes. Dadurch scrollt das Bild nicht mit der Seite mit und maskier so immer einen anderen Teil des Bildes. Wer nun die Überschrift in den p-Block überschneiden möchte, der muss dem entsprechenden h-Tag ein negatives Margin geben. Ein negativer Margin-Wert für die untere Ausrichtung, zieht die Grundlinie der Schrift auf Höhe des p-Blocks.
h3 { ...
margin-bottom: -7px;
... }
Ein paar Kleinigkeiten gilt es zu beachten. Zum einen funktionieren fette Serifenschriften am besten. Diese sollten auch überdurchschnittlich groß sein. Die Georgia schlägt sich hier sehr tapfer. Die Times dagegen pixelt zu schnell auf, ebenso wie serifenlose Schriten. Wer denkt den gleichen Effekt mit kleinen Schriften und großen Padding-Werten erreichen zu können irrt. Ganz schnell verliert die Fläche die Wirkung einer Maske und wird zu einem normalen Bild.
Wieso ich letztendlich auf eine Anwendung verzichtet habe? Geplant war, die Hintergrundbilder, thematisch je nach Kategorie des Eintrag automatisch wechseln zu lassen, nur irgendwie fand ich keine befriedigende Lösung. Leider lässt Movable Type solche tieferen Spielerein nicht zu.
Ich bin froh so etwas noch nicht auf jeder zweiten Seite zu sehen, aber es überhaupt nicht zu finden ist schade. Ich hoffe dieser Eintrag kann daran was ändern, besonders mit Blick auf den IE7 Release und den dann zu verwendenden PNGs, wird diese Methode interessant, denn damit lässt sich der Effekt noch um einiges steigern.
1 Kommentar
Für diesen Eintrag wurden die Kommentare geschlossen.
Leicht umzusetzen und dennoch genial!
Danke für deine wirklich super Erklärung und vor allem die Grafik und das Beispiel dazu. N1!
Grüsse