CSS Gallerie

Mit dieser Seite will ich eigentlich nur zeigen, wie man mit reinem CSS eine komplizierte Gallerie inklusive Overlayeffekt und Maussteuerung aufbauen kann.

Allerdings ist diese Form der Gallerie bisher noch sehr experimentell und instabil.

Die Gallerie setzt CSS2.1 vorraus, wodurch der IE6 ausgeschlossen ist und auch andere IE Probleme haben könnten, aber ansonsten sollten alle gebräuchlichen grafischen Browser mit der Gallerie klar kommen.

Auf der Seite des HTML besteht die Gallerie aus einem div, welches ein Vorschaubild, sowie 2 weitere div, eines für den Overlayeffekt und eines für die Liste mit den Bildern beinhaltet, die Bilder werden allerdings nicht direkt in das HTML geschrieben, da sie ansonsten ersteinmal geladen werden müssten, bevor man die Seite benutzen kann, sprich es würde zu lange dauern.

Aus diesem Grund habe ich ein seperates CSS-file erstellt, welches ausschließlich dazu da ist, den Listenpunkten die Vorschaubilder zu geben und mittels :hover und :after bei bedarf »on demand« die großen Bilder nachzuladen.

Sofern javascript aktiviert ist, wird eine Gallerie außerdem nur geöffnet, wenn man auf das entsprechende Vorschaubild klickt, dies soll es erleichtern, die Seite zu nutzen.

Close
Close
Close