Search This Blog

Wednesday 28 November 2012

Polaroid Gallery effect: tutorials and demos

I've always loved Polaroid photos, in the web there are several tutorials and demos to repeat their format and add some nice effects. Here's a small overview about the most interesting, for me:



1) Develop A Polaroid Photograph With CSS3 Transitions

A pure css3 tutorial with a nice fading effect.
http://demosthenes.info/blog/548/Develop-A-Polaroid-Photograph-With-CSS3-Transitions


2) CSS3 - Effetto polaroid (Italian)

Yet an other only CSS3 effect with a special attention on shadows.
http://soluzionisoftware.blogspot.it/2012/10/css3-effetto-polaroid.html


3) Going Nuts with CSS Transitions

A overview on different CSS3 transitions with samples on ploaroid style.
http://24ways.org/2009/going-nuts-with-css-transitions/


4) Polaroids with CSS3

Tutorial and full working sample, no so glam but really light and quick.
http://www.zurb.com/playground/css3-polaroids


5) POLAROID PHOTOBAR GALLERY WITH JQUERY

Amazing, simple to embed, works good for entire galleries.

Tutorial: http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/
Demo: http://tympanus.net/Tutorials/PolaroidPhotobarGallery/


6) An Awesome CSS3 Lightbox Gallery With jQuery

The best Polaroid+lightbox integration.

Tutorial: http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/
Demo: http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php


7) INTERACTIVE PHOTO DESK WITH JQUERY AND CSS3

Nice and gentle effects, not really functional in real life but a good code to use as a learning object.

Tutorial: http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/
Demo: http://tympanus.net/Development/PhotoDesk/


8) Last but not the least: Polaroid (the song!)

It has nothing to do with web design, it's just a parody of Black Sabbath song 'Paranoid' by some friends of mine ;)



No comments:

Post a Comment