Tutorial HTML, CSS u. PHP - Forum

[Yamram]

Tutorial "Scheinfenster"

Einleitung
Hallo, dieses Tutorial soll zeigen, wie man ein Scheinfenster in jede oder eher gesagt über jede Seite macht. Zweck dieses Ganzen ist die Befreiung von fancybox...
Da mich letztens jemand darauf angesprochen hat und ich es ihm erklären sollte, ist hier jetzt meine Antwort.

Schritt 1: Hintergrund
Bei den meisten Seiten ist es so, dass der Rest der Seite abgedunkelt wird. Hierfür kann man sich am Besten mit Gimp oder PS ein transparentes Bild erstellen, welches wie dieses aussehen könnte:

fixarea_bg.png (199 Bytes) 222-mal betrachtet

Schritt 2: HTML-Code
Jetzt müssen wir 2 DIV-Container anlegen. Das sollte dann folgendermaßen aussehen:

Code: Alles auswählen

<div id="window">
   <div id="page">
      <!-- Inhalt der Seite -->
   </div>
</div>


Der DIV-Bereich "window" wird einfach nur die komplette Seite füllen und das transparente Hintergundbild haben. Der DIV-Bereich "page" beinhaltet den Inhalt und wird einfach einen weißen Hintergund haben.

Schritt 2: CSS
Um nun die letzten beiden Sätze des vorherigen Schrittes umzusetzen, brauchen wir folgenden CSS Code:

Code: Alles auswählen

div#window {
position: fixed;
width: 100%;
height: 100%;
background-image: url(fixarea_bg.png); //das transparente BG-Bild
}
div#page {
height: 400px;
width: 800px;
position: fixed;
background-color: white;
margin: 20px 30px 20px 200px;
}


Die Angaben für "page" sind natürlich Dir überlassen.

Ich hoffe, dieses Tutorial ist hilfreich und lässt auch abwenden von fancybox...

Das Ergebnis

Eine kleine Ergänzung
Um das zu Fenster dynamisch zu öffnen und zu schließen, müsste man Javascript verwenden. Da das hier das falsche Bereich dafür wäre, mache ich es später im richtigen.

MfG
Philipp E.

[Sören]

Mit CSS3 kann man das ganze auch einfacher realisieren, dann klappt auch das mit dem dynamisch aus- und einklappen.

Wenn ich dazu ein wenig Zeit finde (spätestens morgen), werd ich das ganze mal als CSS3-Tutorial hier drunter schreiben.

Ein Beispiel des ganzen: http://soeren-thomas.de/ (unten rechts auf Login klicken).
Das Fenster ist komplett ohne JavaScript realisiert und funktioniert nicht im IE <= 8.

[Yamram]

Jaaa, mit CSS3 geht ja vieles mehr

[Sören]

So, dann fang ich mal an:

Für diese Methode braucht man kein JavaScript, es funktioniert ausschließlich mit CSS3 und dementsprechend nicht in älteren Browsern.
Der Nachteil ist natürlich, dass auch kein IE8 (IE9 dagegen schon) unterstützt wird und somit viele Besucher quasi ausgeschlossen werden.

Diese Variante basiert hauptsächlich auf der CSS3 Pseudo-Klasse :target.
Diese bewirkt, dass, wenn per Link die Id des Elements ausgewählt ist (z.B. wenn die id background ist, wenn in der Url am Ende #background steht), der enthaltene CSS-Code "ausgeführt" wird.


Der HTML-Code besteht, wie Philipps Variante aus zwei Containern:

Code: Alles auswählen

<div id="background">
    <div>
    <a href="#">Schließen</a>
    <!-- Inhalt des Fensters -->
    </div>
</div>
<p><a href="#background">Öffnen</a></p> <!-- Öffnet das Fenster -->

Der äußere Container ist für den halbdurchsichtigen Hintergrund, wofür keine Grafik benötigt wird und der innere zur Formatierung des eigentlichen Fensters.

Damit das ganze funktioniert, wird noch ein Link benötigt, welcher das Fenster öffnet (muss als Ziel die id des äußeren Containers haben, z.B. href="#background") und ein Link zum Schließen des Fensters innerhalb des Fensters (mit href="#").


Der CSS-Code sieht folgendermaßen aus:

Code: Alles auswählen

#background {
    /* Der Hintergrund ist ein teiltransparentes schwarz */
    background-color: rgba(0,   0,    0,    .8);
                      /*   rot, grün, blau, transparenz */
    /* der Hintergrund verdeckt den kompletten Viewport */
    height: 100%;
    width: 100%;
    /* Damit die Position unabhängig vom Rest der Seite ist */
    position: fixed;
    /* am Anfang aus dem sichtbaren Bereich geschoben */
    left: -9999px;
    top: -9999px;
    /* damit sich der Hintergrund über die Seite legt */
    z-index: 5;
}
/* Wählt den direkt nachfolgenden div aus */
#background > div {
    background-color: #FFF;
    height: 300px;
    width: 500px;
    /* auch das Fenster selber soll sich unabhängig vom Rest der Seite anordnen */
    position: fixed;
    /* Die obere, linke Ecke wird in die Mitte des Viewports geschoben */
    left: 50%;
    top: 50%;
    /* Das Fenster wird um die halben Maße nach oben links geschoben, damit die Mitte auch in der Mitte des Viewports ist */
    margin-top: -150px;
    margin-left: -250px;
}
/* Wenn per Link ausgewählt */
#background:target {
    /* Der Hintergrund wird (mitsamt den untergeordneten Elementen, wie dem Fenster) wieder in den Viewport geschoben */
    left: 0;
    top: 0;
}

Sollte eigentlich alles ausreichend erklärt sein.


Das ist erstmal das wichtigste, um das ganze noch hübscher zu gestalten, kann man sich den CSS3-Transitions bedienen und den Einblendvorgang animieren.
Hierzu sind nur kleine Änderungen am CSS-Code erforderlich, als animierte Eigenschaft wird die Transparenz (opacity) genutzt, das Fenster wird vollständig durchsichtig in die Mitte geschoben und dann eingeblendet.

Code: Alles auswählen

#background {
    /* ... */
    /* Element ist vollständig transparent */
    opacity: 0;
    /* Wenn opacity geändert wird, geschieht dies innerhalb von einer Sekunde */
   -moz-transition: opacity ease 1s;
     -o-transition: opacity ease 1s;
        transition: opacity ease 1s;
-webkit-transition: opacity ease 1s;
}
#background:target {
    /* Wird wieder eingeblendet */
    opacity: 1;
}

Mit dieser Methode kann man schöne Fenster alá fancybox gestalten, ohne irgendetwas mit JavaScript machen zu müssen.
Wenn ihr Fragen dazu habt, dann scheut euch nicht diese auch zu stellen.