Viele Designs nutzen Hintergrundvorlagen. Daher soll auch diese Möglichkeit hier demonstriert werden.
Im Kopfbereich wurde eine Hintergrundgrafik eingefügt. Sie ist genau wie der Kopfbereich 900x100 Pixel groß. Diese Grafik wurde vorher als Fotomontage mit Paint.Net erstellt.
In der Navigation wird eine Hintergrundgrafik mit Farbverlauf genutzt. Auch sie wurde mit Paint.Net erzeugt. Die Grafik hat eine Höhe von 80 Pixel. Für den Hover-Effekt wird sie einfach verschoben. Es wäre auch möglich, für den Hover-Effekt eine ganz andere Grafik zu nutzen. Dieses Verfahren ist aber effektiver, da eben nur eine Grafik geladen werden muss.
Für nähere Erklärungen verweise ich wieder auf den Quellcode, vor allem auf den CSS-Teil.
Den Quellcode dieses Beispiels kann man sehen, in dem man
klickt.
Die in diesen Beispielen gewählten grellen Farben dienen der Demonstration.
© Burkhard Schlutt skywalk-webdesign.de