Informationen
Der 3D-Effekt
Eine Trapez-Form -übrigens nur per CSS erstellt- verschafft uns hier einen wundervollen 3-D-Effekt. Im unteren Bereich der Webseite wird dieses gespiegelt und rundet damit diesen Effekt perfekt ab. Im oberen Bereich verstärken die auch perspektivisch angeordneten Social Media Icons nochmal diesen 3D-Effekt.Da die CSS-Trapez-Form aus CSS-border (Rahmen) gebildet ist und man innerhalb eines Rahmens keinen Inhalt einfügen kann, wurden die Social Media Icons auf einer zweiten, neuen Ebene (mit position: relative/absolute) darüber angelegt. Sie bekommen hier also gleichermaßen ein technisch anspruchsvolles wie individuelles Template. Viel Spaß damit.
Template
Dieses Template heißt ' Sofa Social Media '. Die Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.
Die Technik
Lightbox
Wir haben in diesem Template die bekannte und beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery auf gleich auf dieser Seite (home - index.html). Klicken Sie bitte dazu auf die Fotos.Was macht die Lightbox?
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte oder linke Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen.Die Original-Lightbox
Hier einmal der Link zur originalen Lightbox-Gallery . Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.
