| SITE URL | http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html |
|---|
| Author's write: Placing them on simple polaroids on a webpage simply didn't do it for me. I wanted to drag them around, rotate them and still have a fun time. That's were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random). |
| IMPORTANT NOTE: Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all modern browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. Mozillas Firefox 3.1 is getting these properties too (with the -moz- prefix). So, for now, this is just for fun - Other browsers will display the polaroids, but won't have the neat shadow while dragging and rotating while placing them down. |
Demo
Download
