CSS3 Lightbox mit Media Querys

Die CSS3 Lightbox von gestern war ja schon ganz nett .. allerdings gabs auf dem iPhone noch ein paar Probleme .. also je nacht Sichtweise .. 🙂

Die Lightbox war auf eine max. Breite von ca. 45% eingestellt. FĂŒr den kleinen Screen eines iPhones natĂŒrlich nicht wirklich geeignet (zwar lesbar .. aber nicht schön). Daneben gab es ein kleines Darstellungsproblem wenn der Inhalt der Lightbox sehr umfangreich war .. durch position:fixed hatte man nicht die Möglichkeit zu scrollen.

Beides habe ich nun gelöst ..

Die Breite der Lightbox ist nun von der Breite des Viewports abhĂ€ngig. d.h. ein iPhone4 bekommt die Lightbox in ca. 80% Breite, ein großer Monitor mit 45% Breite angezeigt.

Ebenso kann man nun den kompletten Inhalt einer ĂŒberlangen Lightbox erscrollen.

VerĂ€ndert beim testen einfach die FenstergrĂ¶ĂŸe des Browsers .. damit man es besser sieht stehr oben immer die gerade aktive Auflösung drin .. und die Farbe der Lightbox variiert.

Hier die CSS3 Lightbox mit Media Querys.

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.

Regular Expressions Cheat Sheet

Ich habe oder eher hatte meine liebe Not mit Regular Expressions .. aber zwei Dinge haben mir geholfen .. da wÀre einmal dieses Tool um RegEx zu testen.

Damit lernt man es allerdings nur unzureichend .. es eignet sich einfach dafĂŒr um seine Pattern zu testen. Was mir echt auf die SprĂŒnge geholfen hat war eigentlich ein ganz simples Cheat Sheet von Dave Child. Hier ist das RegEx PDF.

Die ganzen riesigen RegEx Websites die in langen SÀtzen und noch viel mehr Worten versuchen die Materie zu erklÀren sind an mir (oder ich an ihnen) gescheitert.