Wozu sind drei Header nützlich?

Diese Frage bekommen wir öfter gestellt. Ein Grund ist, dass man mit einem Header immer auch ein Bild verbindet. Man muss sich davon lösen, dass ein Bereich immer einen Inhalt haben muss. Manchmal ist es sogar besser, leere und völlig durchsichtige Header zu verwenden. Das neue Design "Polydeuces" ist speziell gebaut worden um dir zu zeigen, wozu drei Header verwendet werden können und es sieht dazu noch wirklich gut aus.

So ist das Design aufgebaut

Wir verwenden bei diesem Design Struktur 3 oder 4. Wenn du keine Sidebar brauchst, nimm 4 ansonsten 3. Du kannst jederzeit wechseln. Diese Struktur ermöglicht sogenannte Streifen, also Bereiche, die unter den normalen Bereichen liegen und links und rechts über den gesamten Browser angezeigt werden.

Da wir wollten dass die Navigation frei über dem Hintergrund schwebt und Abstand nach oben hat, haben wir den Headerbereich 1 angeschaltet und komplett durchsichtig gemacht (kein Bild, keine Hintergrundfarbe, keine Linie, kein Effekt). Mit der Höhe des Headers bestimmen wir den Abstand, den die Navigation nach oben hat.

Wichtig ist, dass auch der Streifen neben dem Header komplett durchsichtig, also unsichtbar gemacht wird.

 

Dann haben wir die Navigation unter dem Headerbereich 1 platziert. Wir haben den Navigationsbereich ebenfalls durchsichtig gemacht und dafür den Streifen unter der Navigation mit einer leicht transparenten Farbe, Linien und einem Schatten versehen. Man kann zwar einen Abstand nach unten bei dem Navigationsbereich angeben. Das führt aber leider dazu, dass die Linie unten und der Schatten ebenfalls nach unten versetzt werden.

 

Daher haben wir einfach den zweiten Headerbereich eingeschaltet und ebenfalls durchsichtig gemacht. Ebenso natürlich auch den Streifen neben dem Headerbereich 2. Die Höhe haben wir unseren Wünschen entsprechend angepasst. Eine dünne Linie unter dem Header 2 rundet das Ganze ab.

 

Den Inhalt haben wir mit Weiss hinterlegt und leicht durchsichtig gemacht. Außerdem haben wir einen Schatten eingefügt, der den Eindruck erweckt, dass der Inhaltsbereich "eingestanzt" ist. Den Streifenbereich neben dem Inhalt haben wir auch mit Weiss hinterlegt aber stärker transparent gemacht. Das Problem ist jetzt, dass der Inhalt direkt an Headerbereich 2 angrenzt. Wir können zwar den Abstand nach unten beim Headerbereich 2 einstellen und der Inhalt "rutscht" dann auch tiefer. Allerdings ist dieser Abstand völlig durchsichtig und nicht zu gestalten. Wir wollten aber, dass der Eindruck entsteht, dass der Außenbereich neben dem Inhalt auch nach oben wirkt. Daher haben wir den dritten Headerbereich angeschaltet und den Header selbst durchsichtig gemacht und den Streifen außen genauso eingestellt wie den Streifen neben dem Inhalt. Perfekt. Was man im Screenshot nicht sehen kann. Im Footerbereich haben wir ebenfalls mehrere Footer genutzt um auch nach unten so einen Effekt zu erzielen.

 

Im Bild oben sind die drei Header markiert. Ich hoffe, die kleine Erklärung hilft dir dabei, selbst interessante Effekte umzusetzen. Viel Spaß damit.