Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial von Stefan Trost | 09.05.2012 um 09:53
In diesem Tutorial zeige ich euch, wie man eine komplette Internetseite ausgegraut darstellen kann, was man auch als "Grey Out Effekt" bezeichnet. Benutzt werden kann dieser Effekt zum Beispiel um Bilder oder ähnliches im Vordergrund darzustellen während der gesamte Hintergrund etwas verdunkelt angezeigt wird.
Im folgenden möchten wir uns ansehen, welches CSS und welches HTML für diesen Effekt nötig ist, wie ihr CSS und HTML an eure Bedürfnisse anpassen könnt und wie ihr den Effekt mit JavaScript und jQuery dynamisch ein- und ausschalten könnt.
Das CSS
Wir verwenden folgendes CSS für alle modernen Browser:
#grayout { position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; background-color: black; opacity: 0.5; z-index: 9999; }
Wollen wir, dass das ganze auch in alten Versionen des Internet Explorers läuft, zum Beispiel in der Version 6, müssen wir noch folgende CSS-Regeln ergänzen:
#grayout { filter: alpha(opacity=50); } * html #grayout { position: absolute; }
In neueren Versionen des Internet Explorers und im Edge-Browser funktioniert auch der CSS Code oben, während "filter" für die älteren Versionen nötig ist. Validiert man sein CSS allerdings, muss man beachten, dass "filter" nicht zum Standard gehört.
Wie dunkel wird der Hintergrund?
Wie dunkel der Hintergrund wird, kann man an der Stelle "opacity: 0.5" beziehungsweise "alpha(opacity=50)" anpassen. Diese Zahlen kann man zwischen 0 (unsichtbar) und 1 (vollständig sichtbar) beziehungsweise zwischen 0 und 100 so anpassen, wie man es haben möchte.
Das HTML
Zuletzt benötigen wir noch das HTML. Wir benötigen nur die folgende Zeile:
<div id="grayout" style="display: none;"></div>
An welcher Stelle man diese Zeile in sein HTML Dokument einfügt ist egal. Man kann die Zeile auch erst später mit jQuery hinzufügen. Das "display: none" sorgt dafür, dass der ausgegraute Bereich anfangs noch nicht sichtbar ist. Wenn man den Bereich sofort zeigen will, kann man das "display: none" natürlich auch weglassen.
Hintergrund dynamisch ausgrauen
Wenn wir jQuery benutzen, können wir den Hintergrund dynamisch ausgrauen und wieder einblenden lassen. Wir benutzen folgenden Link dazu:
<a href="#" onclick="$('#grayout').toggle(900); return false;">GrayOut</a>
Klickt man auf diesen Link "GrayOut" wird der verdunkelte Hintergrund der Seite entweder angezeigt oder ausgeblendet, je nachdem ob er gerade sichtbar ist oder nicht.
Elemente im Vordergrund anzeigen
Zuletzt stellt sich die Frage, wie wir einzelne Elemente (wie zum Beispiel einen DIV-Container) im Vordergrund, also vor dem ausgegrauten Hintergrund, anzeigen können.
Dazu ist die CSS-Eigenschaft "z-index" wichtig. Wir erzeugen den ausgegrauten Hintergrund, indem wir eine halbtransparente DIV-Box, die genauso groß ist wie unsere Seite (width und height stehen beide auf 100 %), über alle anderen Elemente auf unserer Seite legen, indem wir den "z-index" dieser Box höher setzen als den aller anderen Elemente (siehe der Abschnitt über das CSS).
Wenn wir nun ein Element noch vor dieser halbtransparenten DIV-Box erscheinen lassen möchten, müssen wir lediglich dafür sorgen dass dieser Box über CSS ein noch höherer z-index zugewiesen ist als der z-index des Hintergrunds. Für den Hintergrund verwenden wir in dem Beispiel einen z-index von 9999, wir könnten dem Element also einen z-index von 10000 geben um das zu erreichen.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
XAMPP: SSL/HTTPS für lokale Projekte einrichten
Tutorial | 8 Kommentare
CSS: Wieso ist DarkGray heller als Gray?
Info | 0 Kommentare
10 hilfreiche Tipps gegen den Jo-Jo-Effekt
Tipp | 0 Kommentare
Bild vor dem Upload im Browser verkleinern
Tutorial | 5 Kommentare
Wie kommt es zum Jo-Jo Effekt?
Info | 0 Kommentare
PHP: Nur bestimmte Buchstaben, Zahlen und Zeichen in einem String zulassen
Tipp | 10 Kommentare
HTML5 Canvas als Bild an Server senden und speichern
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.