Besonders wenn der Header des Divi-Themes farblich Ton in Ton ist mit der restlichen Website, entsteht beim Scrollen eine harte Linie, wenn der Inhalt unter dem Header verschwindet. Auf vielen Websites wird dies mit einer Trennlinie in anderer Farbe gelöst. Wer dies nicht möchte, weicht vielleicht lieber auf eine leicht transparente «Übergangszone» aus. Wie das geht, zeigen wir hier.
Der Header der Website, auf der Sie sich gerade befinden hat die Hintergrundfarbe weiss – ebenso wie alle anderen Bereiche der Website. Damit beim Scrollen der Content nicht einfach Knall auf Fall unter der ansonsten nicht sichtbaren Grenze verschwindet, haben wir den Header grösstenteils blickdicht gestaltet und erst im unteren mit zunehmender Transparenz versehen.
Dafür haben wir folgenden CSS-Code eingesetzt. Sie können ihn in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen:
#main-header, .et_menu_container, .logo_container {
background:
linear-gradient(to bottom,
#ffffff 85%,
rgba(255,255,255, 0.0)) !important;
}Im Code wird zunächst die weisse Farbe #ffffff «blickdicht» festgelegt. Erst auf den unteren 15% der Headerhöhe haben wir einen Verlauf der weissen Farbe (diesmal rgb-Werte) von 0 auf 100% eingefügt.
Der Effekt wird sichtbar wenn Sie auf den Seiten dieser Internetpräsenz scrollen. Der Content verblasst zunächst und verschwindet erst dann ganz.
