• 1. Einfache CSS3 Bildergalerie

    Diese sehr einfache Galerie, die auch noch im IE6 funktioniert, ist mit einigen CSS3-Eigenschaften, wie Schatten und abgerundeten Ecken verfeinert worden. Da hier Anker verwendet werden, ist diese Galerie auch nur für den Einsatz auf externen Seiten geeignet. Demo»

  • 2. Einfache CSS2 Bildergalerie

    Diese Galerie ist speziell für den IE8. Dieser Browser hat wohl noch so seine Schwächen. Dieser und Vorschlag Nummer 3 sind auch die einzigen Galerien, die auf den IE8 Rücksicht nehmen. Demo»

  • 3. Einfache CSS2 Bildergalerie die Zweite

    Wie Vorschlag Nummer 2, jedoch viel kleiner. Demo»

  • 4. CSS3 Aufklapp Bildergalerie

    Eine kleine Aufklapp-Galerie, die sich gut in einer Webseite einfügen lässt. Demo»

  • 5. CSS3 Bildergalerie

    Wie Vorschlag Nummer 4, jedoch ständig sichtbar. Demo»

  • 6. CSS3 Bildergalerie mit 12 Vorschaubilder

    Diese kleine Galerie, die mit einer ungeordneten Liste realisiert wurde, ist sehr platzsparend, da sich die vergrößerten Bilder über alle Vorschaubilder legen. Bei dieser Konstruktion lassen sich aber nur sehr schwer Ausblendeffekte umsetzen. Um verschiedene Effekte anwenden zu können, sollten die vergrößerten Bilder neben oder unter den Vorschaubildern angezeigt werden. Damit das Ganze auch in den Webkit-Browsern funktioniert, muss den A-Elementen noch das tabindex-Attribut übergeben werden. Diese Angabe sorgt dafür, dass der Fokus nach dem Klicken erhalten bleibt. In den Vorschlägen 2 - 5 sind diese Attribute notiert. Demo»

  • 7. CSS3 Bildergalerie mit verschiedenen Übergangseffekten

    Hier noch mal die Galerie aus Vorschlag Nummer 1. Hier sind aus Übungszwecken mehrere Übergangseffekte umgesetzt worden. Leider funktioniert diese Galerie erst ab Version 9 des Internet Explorers. Demo»

  • 8. CSS3 Bildergalerie mit Pseudoklasse:target

    Diese kleine Bildergalerie ist mit der CSS3 Pseudoklasse :target umgesetzt worden. Mit einem kleinen Trick wird verhindert, dass die Anker am Viewport angezeigt werden. Somit ist es möglich, die Galerie überall auf der Webseite zu platzieren. Demo»

  • 9. CSS2 Bildergalerie mit :hover

    In der nun folgenden Galerie werden die Vorschaubilder durch überfahren mit der Maus vergrößert dargestellt. Eine Besonderheit ist, dass alle Bilder während der Vergrößerung zugänglich bleiben. Demo»

  • 10. CSS3 Bildergalerie mit Slide-Effekt

    Kleine einfache Galerie mit Slide-Effekt. Hier wird beim überfahren mit der Maus, der gesamte Bildcontainer verschoben, wobei das Schieben mit transition:left 1s erzeugt wird. Demo»

nach oben