CSS 3 : Visual Effects

Using CSS3 Visual Effects

Create A Polaroid Image Gallery

We always try to stay pretty active with our Flickr feed; our chief instigator Bryan does a great job of capturing the day-to-day and special events and even some of our old work. We wanted a great way to show off these photos, so we turned to CSS3 to create a compelling, fun image gallery. The Polaroid style is pretty common, but we wanted not only to make it dead-simple to create the gallery in the markup but also to add styles that would have required Javascript just a year or two ago.

THE POLAROID GALLERY MARKUP

First off, we created very simple markup for the gallery, something that would be easy to generate automatically using the Flickr API. The markup for the entire gallery looks like this:

01	<ul class="polaroids">

02

<li>

03	<a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">

04	<img src="image-01.jpg" width="250" height="200" alt="Roeland!" />

05

</a>

06

</li>

07

<li>

08	<a href="http://www.flickr.com/photos/zurbinc/3985295842/"title="Discussion">

09	<img src="image-02.jpg" width="250" height="200" alt="Discussion" />

10

</a>

11

</li>

12

</ul>

We’ll be using the title element in a minute.

read more at : 

http://coding.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/

(text & sources taken from the above link)