CSS3 Rounded Thumbnail Gallery
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:
- 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
I'm looking to add a significant amount of Music data to the OpenRecommender pro...
This is a post to announce the ALPHA release of OpenRecommender, version 1.0.
...Leave a Reply
No trackbacks yet.
No post with similar tags yet.
Posts in similar categories
- CNN-style Interactive News Ticker (HTML5/CSS3)
With the real, true and unbiased news inevitably moving online towards the so-called "Alternative Media" (which really is almost reaching the point where it is not alternative so much as the first go-to source), its a good idea to start replicating some of the most useful elements from Television, Print and Radio (aka. the rest... - HTML5 features template and HTML5 skeleton
With all the buzz about HTML5 its high time to release an official post on the subject and cement our intention to support the standard fully. It is impossible to ignore the possibilities of a single thin-client based development environment and common sets of tools for working with them. Add to that the fact that... - 5 Steps to Creating Slick Transparent Overlays
One of the best Web Design guides out there is still CSS Zen Garden. Not only does it provide a beautiful looking layout and offer up a base template, but its presentation code also validates to the latest CSS and xHTML standards. However, if you've ever tried to work with the main template, you'll notice... - Dynamically Resizing an iFrame
iFrames, love them or hate them they are all over the web.
When used properly, they can actually enhance a user's experience for example by embedding multimedia or related content from a separate site, however when used improperly, and they often are, they can be an unsightly nuisance.
Mostly, I try to advocate proper uses of such... - RSS Reader in jQuery .vs. JavaScript (AJAX)
Parsing RSS is a task that many developers have been faced with. jQuery makes this significantly easier on the client-side, but the good ol' AJAX is not that bad either if you set things up functionally to minimize on-page code. Two versions of the same RSS Reader with parsing handled with and without the "write... - BC$ (JS/xHTML/CSS) Web Framework
In light of the massive popularity of existing JavaScript frameworks such as Dojo, jQuery and the original one (as far as I'm concerned) Prototype.JS I'm releasing a heaping mass of code which I've accumulate over the past 3 years of consulting, tinkering, hacking, borrowing ideas, and learning in web development. I doubt that my own...
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.