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

Leave a Reply

No trackbacks yet.

No post with similar tags yet.

Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Archives

  • Switch to our mobile site