CSS3 Rounded Thumbnail Gallery

CSS3 is shaping up to be quite promising.
Some of the features and shiny new toys that have me excited most are:
- Typography (via @font-face)
- Animations (via @keyframes and transform)
- Transitions (via transition and transition-delay)
- REAL Rounded Corners (via border-radius)
- Shadows for everything! (via text-shadow and box-shadow)
In this spirit, the following is an interactive rounded thumbnail gallery which was not previously possibly without some serious back-end coding to re-render each individual image as a separate “rounded thumbnail” file (using something like C++/GD or PHP/ImageMagick, etc); and now it’s become just a few lines of CSS using some of the aforementioned CSS3 goodies!
Here’s the part that generates the rounded image on the client (requires a modern browser with CSS3 border-radius such as FF4+, IE9+, Safari 5+, Chrome 8+, Opera 11+):
/* Round Thumbnails */ img.round_thumbnail { width:60px; height:60px; background:#fff; border:2px solid transparent; -moz-border-radius:60px; -webkit-border-radius:60px; border-radius:60px; } img.round_thumbnail:hover { width:100px; height:100px; border:2px solid #ccc; -moz-border-radius:160px; -webkit-border-radius:60px; border-radius:100px; }
As for the innovative approach to pure CSS3 popups, I take no credit at all, the credit is due to The CSS Ninja and his excellent Futurebox tutorial.
-or-
Related articles
- Showcase Of Useful CSS3 Tutorials And Techniques (smashingapps.com)
- Looking at quirksmode.org, I see that even IE8 doesn’t support border-radius or :nth-child in CSS – both of which would make my (devsigh.com)
- Lightbox and Slide Show (jQuery FancyBox) in Pure CSS3 (css.dzone.com)
- Designing with CSS (rajbgm.wordpress.com)
- Create Various CSS3 Image Styles (mt-soft.com.ar)
- Rounded / Sphere Shape Image using CSS (itzurkarthi.com)
- 47 Amazoing CSS3 Animations (webdesignerwall.com)

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos