Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

CSS3 Rounded Thumbnail Gallery

Posted by bcmoney on October 16, 2010 in CSS with No Comments


No Gravatar
English: CSS3 Styling

CSS3 Logo - Image via Wikipedia

CSS3 is shaping up to be quite promising.

Some of the features and shiny new toys that have me excited most are:

 

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-

 

 

 

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