smaller 480px
larger 480px smaller 801px
larger 801px smaller 1023px
larger 1023px

CSS3 Lightbox mit Media Querys

Follow me on Twitter | Visit my Website

Diese Lightboxen funktionieren ohne JavaScript .. nur mit CSS3 und dem :target Selector.
Somit kann man sie auch direkt verlinken und die Seite mit einer geöffneten Lightbox betreten.
Ebenso kann man die Lightboxen untereinander anspringen.
Semantisch ergeben sich natürlich auch einige Vorteile .. Ankerlinks sind von Haus aus gut für OnPage Optimierung. Die ganze Seite ist für Spider und Screenreader hervorragend zugänglich und man spart sich einfach JavaScript.

Der Rest ist dann nur ein bischen CSS3 mit Transitions .. nicht getestet auf iPhone, iPad und Android .. Feedback erwünscht :)

CSS3 Lightboxen ausprobieren:

Lightbox 1 öffnen

Lightbox 2 öffnen

Lightbox 3 öffnen