CSS3 Lightbox ohne JavaScript

Ich hacke ja schon etwas länger an HTML5 und CSS3 rum und probiere wie weit man es treiben UND dann auch noch verwenden kann. Mit dem Path Menü hab ich damals den Hack mit dem checked Selector und den versteckten Input Felder ausprobiert.

Die CSS3 Lightbox die ich gebaut habe funktionieren im IE10, FF, Chrome und Safari. Auf mobilen Endgeräten funktionieren die Boxen auch. Getestet auf dem iPhone und iPad unter iOS > 5.1.

Der Selector bei diesem Beispiel ist der TARGET Selector. Er ist dazu gedacht, das aktive TARGET Element, das per Anker angesprungen wurde zu stylen. Daneben spiele ich mit der VISIBILITY und der OPACITY um einen Lightbox Effekt zu erzielen.

Beide Eigenschaften sind auch notwendig da die ganzen Overlays ja direkt in den Viewport geklebt werden .. aber (erst mal) nicht klickbar sein sollen wenn sie nicht zu sehen sind.

Wenn die Lightbox offen ist .. soll jeder Klick um die Lightbox herum zum schließen der Lightbox führen .. so kennt es der User .. dazu muss man das komplette teiltransparente graue Overlay nach dem erscheinen der Lightbox klickbar machen.

Auch kein Problem .. einfach dem Overlay einen leeren Ankerlink verpassen und den Cursor auf default setzen.

Mit dem PLUS Selector und ein paar CSS Transitions kann man dann daraus jede Menge Sachen machen die vorher nur per JS möglich waren .. in diesem Fall ein paar Lightboxen.

Das CSS steht direkt im HTML Dokument .. und auch sonst hab ichs erst mal einfach gehalten.

Hier das Beispiel – CSS3 Lightbox ohne JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *