11.02.2009
Schatteneffekt mit Schatten-Boxen
Eine mit dezenten Schatten umrandete Website kann optisch sehr ansprechend wirken und hebt die Seite vom Hintergrund leicht perspektivisch ab.
Ein derartiger Schatteneffekt wird auch auf dieser Seite verwendet, wie ihr an den Rändern erkennen könnt:
Das Prinzip, mit dem dieser Effekt erzielt wird, ist dabei recht einfach:
Ihr benötigt hierzu eine Grafik entsprechend der Breite eurer Website oder eines entsprechenden Div's. In der Mitte entspricht der Farbton dem Hintergrund eures Inhaltscontainers, während sie links und rechts eben diesen Schatteneffekt hat. Die Farbe sollte auf die Hintergrundfarbe des body abgestimmt sein.
Tipp: Kommen innerhalb eurer Seite unterschiedliche Hintergrundfarben vor (z.B. für die Navi und den Inhalt), dann vewendet eine Grafik, die in der Mitte transparent ist und nur an den Rändern den Schatteneffekt hat.
Wie man eine solche Grafik herstellt, erklärt euch wieder Garnet in ihrer PI-Fundgrube.
Verwendet wird hierzu unser bewährtes Grafikprogramm Ulead Photo Impact X3
Nun muss diese Grafik lediglich noch in unser CSS-Layout eingebunden werden.
Wir weisen die Schattengrafik dem gewünschen Div als Hintergrundgrafik zu und lassen sie vetrikal "kacheln", so dass sie sich der Länge nach dem Inhalt unserer Box anpasst.
Die CSS-Angaben hierzu lauten wie folgt:
#container {
width: 700px;
margin: 0 auto;
background: url(schatten.gif) repeat-y;
}
Wir haben damit einen horizontal zentrierten Div definiert und darauf kachelt sich unsere Schattengrafik, die gleichzeitig für die Hintergrundfarbe verantwortlich ist.
HTML-mäßig wird das Ganze so eingebunden:
<div id="container">
Containerinhalt
</div>
Der Containerinhalt kann nun wiederum aus einem Header, der Navi, dem Content u.v.m. bestehen.
Achtet jedoch darauf, dass die linken und rechten Außenabstände (margin) der inneren Elemente zur "Schattenhülle" mindestens so groß sind wie die Schattenbreite selbst, sonst wird der Schatten durch den Inhalt überlagert.
Mit zunehmender Länge wächst unsere Schattengrafik mit.
Layout-Demonstration
Setzen wir nun das Beispiel aus der PI-Fundgrube in ein CSS-Layout um. Das Ergebnis ist hier dargestellt.
Sämtliche verwendeten Schattengrafiken haben eine Gesamtbreite (inklusive Schattenfläche) von 700px. Wer weder Ulead Photo Impact X3
header.gif
balken.gif
content.gif
Die nachfolgenden Erläuterungen beziehen sich lediglich auf die maßgeblichen CSS-Angaben. Der komplette CSS- und HTML-Code ist in der Demo angegeben.
Den body definieren wir mit 100% Breite und Höhe, sorgen dafür, dass er keine Innen- und Außenabstände hat und weisen ihm eine Hintergrundfarbe zu.
Soll sich der #header über die gesamte Bildschirmbreite erstrecken, weisen wir ihm ebenfalls einen Breitenwert von 100% zu. Damit es bei zu kleinem Viewport keine Probleme gibt, außerdem noch einen min-width-Wert entsprechend dem #content einschließlich padding, hier also 700px. Seine Höhe ergibt sich entweder automatisch nach seinem Inhalt oder wird gesondert definiert. Als Hintergrundfarbe verwenden wir den gleichen Farbcode wie ihn unsere Schattengrafik header.gif hat.
Diese Schattengrafik wird nun mit folgenden CSS-Angaben dem #header zugewiesen:
background-image: url(header.gif);
background-position: top center;
background-repeat: repeat-y;
Mit der ersten Angabe erfolgt die Zuweisung als Hintergrundgrafik.
Die zweite Angabe positioniert die Grafik am oberen Rand des #header (top) und zentriert sie innerhalb des #header durch den Wert "center".
background-repeat: repeat-y sorgt dafür, dass sich die Grafik vertikal wiederholt (kachelt).
Das gleiche System liegt dem dunkelgrauen #balken-Div zugrunde.
Für unseren #content ist nun etwas Rechenarbeit angesagt:
Auch seine Hintergrundgrafik ist insgesamt 700px breit. Weil der Text oder andere Elemente sinnvollerweise nicht den Schattenrand berühren sollen, müssen wir für den #content einen Innenabstand zu seinem äußeren Rand definieren. Im Beispiel wurde hierzu ein Paddingwert von 20px (auf jeder Seite) verwendet. Erinnern wir uns nun kurz an das "CSS-Boxmodell", nach dem die Innenabstände die Gesamtbreite einer Box erweitern. Würden wir dem #content eine Breite von 700px entsprechend seiner Hintergrundgrafik zuweisen, erhöhte sich durch den Paddingwert von links und rechts je 20px seine Gesamtbreite auf 740px. Das würde uns den Effekt der Schattengrafik verhauen. Folglich darf die Breite des #content lediglich 660px groß sein.
Die 2 x 20px Innenabstand links und rechts erweitern sie auf 700px und damit passt alles wieder im Einklang mit der Hintergrundgrafik.
Für die #content-Zentrierung ist margin: 0 auto; verantwortlich.
Hier nochmal unsere #content-Angaben im Zusammenhang:
#content {
width: 660px;
margin: 0 auto;
padding: 20px;
background-image: url(content.gif);
background-repeat: repeat-y;
}
Abschließend noch ein kleiner Tipp zur Überschrift h1: Wenn wir hier für "line-height" den gleichen Wert verwenden wie bei der Höhe des #header (hier 50px), dann wird der Text der (einzeiligen) Überschrift automatisch vertikal im #header zentriert.
Durch ausgewählte Farbabstimmungen könnt ihr euren Seiten mit "Schatten-Boxen" den letzten "Pepp" verpassen. Natürlich lassen sich auch solche Schattengrafiken innerhalb der Seiten als gestaltendes Element einsetzen.
Viel Spaß also beim "Schatten-Boxen"!