Lightbox in salsa CSS3
Mercoledì 25 Novembre 2009 - 08:19
di Cesare Lamanna
C’erano una volta Lighbox e i suoi fratelli/cloni, con quelle belle gallerie di miniature in griglie squadrate e ordinate. Arrivarono poi le features sperimentali dei CSS3, come le trasformazioni che consentono di ruotare oggetti a piacimento, per cui eccoci qui, l’ultima incarnazione di Lightbox è il trionfo dell’effetto “foto sparse sul tavolo”:
La tecnica sfrutta l’ormai ubiquo jQuery (anche in versione UI), alcune caratteristiche dei CSS3 e PHP (sia per passare i valori di stile relativi alle trasformazioni nel markup HTML sia per applicare automaticamente l’effetto a tutte le immagini contenute in una specifica directory). Ecco il risultato.
C’era pure, comunque, una sorta di precedente.
Categoria: Scripting | Permalink
sponsor
Commenti
1
sbaglio o l’unica parte CSS3 e’ il box-shadow? Via CSS3 e’ possibile fare tutto questo con animazioni, rotazioni e morphing senza nemmeno dover usare jQuery + jQuery UI … penso che l’autore dovrebbe ridimensionare in toto il titolo di questo lavoro.
2
In parte è vero Andrea, nel senso che nel foglio di stile che accompagna il lavoro di CSS3 c’è traccia solo per il box-shadow.
Ma se guardi il codice PHP, lì genera i valori (casuali) per le rotazioni/trasformazioni che poi passa agli stili inline. Copio e incollo dal codice generato:
<div id="pic-8" class="pic" style="top:368px;left:274px;background:url(img/thumbs/endurance.jpg) no-repeat 50% 50%; -moz-transform:rotate(-33deg); -webkit-transform:rotate(-33deg);”> <a class=”fancybox” rel=”fncbx” href=”img/original/endurance.jpg” target=”_blank”>endurance</a> </div># - postato da Cesare Lamanna - 25 Novembre 2009 - 12:39
3
grazie Cesare, quindi box-shadow and rotation senza rendere IE compatibile via filters … uhm, insisto, il titolo andrebbe ridimensionato, con solo CSS3 e WebKit nightly e’ possibile ricreare praticamente tutto senza usare alcun JavaScript. Quello sarebbe un lavoro degno di tale titolo
4
[…] Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles. I have discovered only yesterday and thanks to my good old favorite Web related italian blog, a nice (or if you prefer another) jQuery lightbox style experiment. […]
# - postato da Ajaxian » If That Is An Awesome CSS3 Gallery, How Would You Call Mine? - 26 Novembre 2009 - 12:01
5
il mio post in Ajaxian parla appunto del mio piccolo esperimento:
http://www.3site.eu/examples/g.....allery/Nessun uso di JavaScript, PHP, puro CSS 3 con parte di quel che porta nel nostro futuro.
Cesare grazie comunque, senza questo post non avrei creato la piccola gallery ;)
6
[…] Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles. I have discovered only yesterday and thanks to my good old favorite Web related italian blog, a nice (or if you prefer another) jQuery lightbox style experiment. […]
# - postato da If That Is An Awesome CSS3 Gallery, How Would You Call Mine? | Web Developer - 04 Dicembre 2009 - 18:58
7
[…] Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles. I have discovered only yesterday and thanks to my good old favorite Web related italian blog, a nice (or if you prefer another) jQuery lightbox style experiment. […]
# - postato da If That Is An Awesome CSS3 Gallery, How Would You Call Mine? « BrightSpark - 06 Dicembre 2009 - 18:40