/ best free open source web resources /

Graphic Resources

Polaroid Photo Viewer with CSS3 and jQuery

Posted · Category: Gallery, License Free

Marco has created a Polaroid Photo Viewer with CSS3 and jQuery by combining the CSS3 Box Shadow and Rotate properties. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s randomly rotated to the left or the right.

Sadly, CSS3 and HTML5 aren’t the standards yet. Not all modern browsers will be able to show off the full effect. 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. If you are interested in creating a Polaroid Gallery, you can also look at the Drag and Drop Polaroid Photo Gallery in Flash?

Polaroid Photo Viewer with CSS3 and jQuery

Requirements: Safari and Google Chrome
Demo: http://demo.marcofolio.net/polaroid_photo_viewer/
License: License Free

  • Piggy

    It’s working in Firefox 3 too.

  • Firefox 3.5 now supports box-shadow. Text shadow is already supported in Firefox 3.0, which is likely what Piggy saw. Since box-shadow this is not officially part of the W3C recommendation, they are using -moz-box-shadow. Firefox 3.5 is currently a release candidate, and expected to release in the very near future leaving us to wallow with IE.

  • That is awesome, I look forward to using. I am not expert at javascript so I don’t know how easy or hard this is, but it would be very cool if the polaroid positions were persisted on browsing. eg. The user clicks on the polaroid content to reveal its full article on a child page, then on going back to the page the user is disorientated by a new ‘scattering’. Worth a thought?

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons