Normalerweise wird für den schicken Lightbox-Effekt, der auf vielen Seiten zu sehen ist, immer ein Schnipsel JavaScript benötigt. Oft umgesetzt mit jQuery, gibt es Unmengen an fertigen Lösungen. Als bekannte Größen nenne ich hier mal die Fancybox, ThickBox, prettyPhoto und die Slimbox 2. Wie gesagt, funktioniert alles nur mit jQuery. Aber eine Lightbox komplett mit CSS3 und ohne jegliche Skripte umzusetzen, das ist doch mal etwas Neues.
Die Lösung stammt von Codrops und bedient sich CSS3 Transitions und Animations. Mithilfe der Pseudo-Klasse :target (Selektion von Elementen, die Ziel von Verweisen sind), ist es möglich, sich durch die einzelnen Bilder zu klicken. Damit ist schon mal klar, dass es derzeit nur für Browser in Frage kommt, die diese Klasse bereits unterstützen. Der Internet Explorer gehört aktuell nicht dazu. Öffnet man die Demo mit dem IE, fehlt nicht nur die Möglichkeit der Navigation zwischen den Bildern, auch jeglicher Effekt (Transitions und Animations) wird nicht dargestellt.
Was wirklich schön ist, sind die drei Demos, die aufgeführt werden. Beispiel Eins zeigt eine von innen heraus größer werdende Lightbox. Bei dem zweiten Beispiel füllt das Bild zuerst den gesamten Bildschirm aus und wird dann kleiner, bis es die endgültige Größe erreicht hat. Im dritten Beispiel öffnet sich die Lightbox so, wie wir es schon von vielen Varianten gewohnt sind – und die sehen auch immer wieder toll aus. In allen drei Demos sind die Bilder zuerst transparent, wobei diese während der Animation immer mehr abnimmt.
Lightbox mit CSS3 von Codrops
Bei all der Euphorie, die derzeit auf CSS3 (und auch HTML5) gelebt wird, sei jedoch gesagt, dass solche Lösungen derzeit noch mit etwas Vorsicht zu genießen sind. Wie oben bereits erwähnt ist nichts davon im Internet Explorer zu sehen bzw. funktioniert auch nicht. Wenn man seine Zielgruppe und damit auch die Browserverbreitung und -Nutzung kennt, kann die eigene Seite sicherlich mit diesen Elementen aufgewertet werden. Und: man spart sich jQuery bzw. weitere Serveranfragen des Browsers.