2010-07-05
submit to reddit

20 Excellent Examples of CSS

With the launch of the iPhone 4 and the general increase in mobile web use (aka the iPhone, iPod touch and iPad), the value of animations done using the all new CSS3 or Cascading Style Sheet 3, has risen dramatically.

Throw in the fact that Adobe Flash is a forbidden fruit in the world of iDevices, CSS and JQuery powered animations are going to rule the next generation of rich internet media. CSS3 allows designers to write light weight animations that can be easily embedded into web pages and best of all they don't have to bind it with any license like with Flash which is a protected commercial platform.

We have handpicked our top 20 examples of great animations created using CSS3 and JavaScript. Some of these demos contain downloadable source files too so that you may play with them later on.

NOTE: CSS3 animations require a WebKit engine based browser which means you can only view them on Google Chrome or Apple Safari. Although some of them work on Firefox , most don't.

1.  Image Gallery based on CSS3 Transitions

You won't believe it but this image gallery has been completely designed using CSS and JQuery calls. CSS3 transitions have been used to create the event listeners. Chrome & Safari are fully supported but it also works fine on Firefox.

2. 3D Object Rotation Using Arrow Keys

Again, there is absolutely no Flash involved here. The coke can rotates as you scroll the bar to the right and the can looks like it's a 3D object. CSS Displacement maps were used to create the illusion of  3D object movement.

3. 3D Object Rotation Using Arrow Keys

This sample gallery titled "Land of Nomads" is yet another beautiful example of a purely CSS based interactive Image gallery. You can click any image from the pack of jumbled images and it would be enlarged and moved to top left corner of your screen to make it prominent. See the speed of it's load time since there is no Flash involved here.

4. Three Dimensional Space Simulation

Now this example is simply awesome. It's not just images or animations, it's complete space simulated in 3D right in your browser. You can only view it on Chrome and Safari. Probably there are multiple layers of images that give 3D effect when combined and rotated on their own axes. It's all the play of writing a "spinner" in CSS and then timing it to make it 3D.

5. Rotating Color Band Timer

A perfect example that you can enlarge and make your wall-paper. The 3 color bands that revolve around the Hour, Minute and Seconds ticks are simply amazing. You cannot spot any delay in the movement of the bands as is usually the case with Flash. There is a bit of XHTML involved and you can also download the Clock simulation CSS files from here.

6. Elastic Thumbnail Menu

This will work great for any online product display website or website that has thumbnails spread over their pages. CSS has been used to animate the thumbnails so that when you hover over them, they are enlarged to make them prominent and also give an overall cool look. Definitely recommended for Shopping websites.

7. iTunes Like Slider in CSS

This animated icon tray runs really smooth in both Chrome and Safari and resembles the much acclaimed iTunes Icons Slider. You can move the icons right and left with the slider or with left and right keys. JQuery UI is used to give it the sleek look.

8. Animated DJ Discs

CSS is used in clever combination with JQuery to create this visual DJ that can be controlled with a mouse. You can actually rotate the discs with mouse and the sound pitch changes accordingly. Again, JQuery UI was employed to create the rotation motion effect.

9. Dynamic Index Card Stacks

This looks similar to the Image galleries we have reviewed so far but it's not. The difference is in the way the cards come to the foreground and do not move around the screen. Previously these animations would have been written using the Adobe Flash platform but now the light weight CSS+JS has taken it's spot. A cool application for this card stack would be using them in an online book reader. You can read the tutorial on how to make this animated card stack here.

10. Fixed Motion Animated Image Gallery

This is yet another Image Gallery created using pure CSS (not even JS). Images are jumbled up with their captions at the bottom right of the images. The hover over effect has been added so that the images rotate and align themselves when the cursor moves over one of the images.

11. Vertical Button Menus

Usually JS is used in creating dynamic animated button menus for websites but with pure CSS3 that is now possible without any JS at all. The proof is this demo showing vertical menu bars with different number of button ordered vertically and which respond to hover-over event of the mouse. This demo is by Toby Pitman, an acclaimed CSS/web designer.

12. Docking Menu

This menu is designed and written using SVG and CSS3 Transition (a previous review used Transitions to create animated Image gallery). Just like the Stack of Cards example, here the menu items respond to the hover-over event they are enlarged and brought forward when you move your cursor over them. The total programming that goes behind this animated menu is not more then one page and creates this stunning user friendly menu!

13. Movable Sticky Notes

This is simply awesome. You wouldn't recognize that CSS is used in creating these animated sticky notes. You can create new notes on the browser page, edit them with full text alignment support, move them around and then delete them right from within the browser without any Flash involved. HTML5 Client side Data storage concepts are used to hold the data written on the notes. This is true UI in action!

14. Snowball Effect

You might have seen this snowfall effect before where it was written in JS , but here they've used CSS3 Sliders to write the snowfall effect. It may be Summer heat out but this snowfall effect can add a cool feeling to your pages without taking any extra processing as is the case with Flash whose FLV decoder puts a lot of load on the CPU.

15. Cartoon Animation

Now we also have animated cartoons, not just animated images done completely in CSS. This demo by CSSPlay UK definitely shows the potential of creating rich content on the internet using CSS and JS. You have to keep the mouse moving over the frame to keep the animation running. In the Firefox version, you have to keep clicking your mouse to keep the animation running. A smart use of CSS Selectors made this happen.

16. Dynamic Animated Content Gallery

Something that was previously done using the Adobe Flash dynamic-button event handlers is now completed done using JQuery UI with CSS3 and what you have is a complete dynamic content gallery. In this demo, a matrix of thumbnail sized images are on display and each image responds to the hover-over event and a card is created next to the cursor with the information of that image. Everything is handled dynamically with out any delay at all. The images are of presidents of countries around the globe. You will have to click download on the page to proceed to this animated gallery.

17. Tab Slider

This is an impressive example from CSS Ninja where tabs containing a title bar with some content in plain text are arranged in close order. They expand upon clicking them and contract again when another tab is clicked. The content is static but the animations are done in real time. The accordion effect of CSS3 is used here to create this animated tabbed text. You can download the source files for this demo from here.

18. Completely Animated AT-AT Walker

The capability of animating multiple objects in a frame simultaneously in CSS3 has been demonstrated here with the robot AT-AT made up of many components and each one is moving in it's own defined course at the same time. This gives an illusion of an object moving around in the frame. Even the background is changing according to the movement of AT-AT.

19. JQuery+CSS Sleek Menu

This is by far the best sliding button menu that CSS has to offer. Not only is it animated like the images in the CSS based gallery, but the thumbnail sized buttons change their color while in inactive mode. A button becomes visible with all its colors when you hover over it. A transparent layer is spread over non-active buttons while the cursor is on one of the buttons. The designer claims that Flash will be obsolete when animation this rich can be written using open standards of CSS3 and JQuery.

20. Dynamically Expanding and Movable Image Gallery

Yet another CSS based Image gallery but a lot different from the ones reviewed in the above examples. You can completely move around in the gallery with arrow keys. The gallery slides smoothly when moved and the images also are expanded upon hovering over them. Another proof-of-concept of what CSS3 could achieve.

Add Your Thoughts

captcha

Gravatar

Commented by: clippingimages, 17 July, 2010

nice combination of stuffs pal.. cool! keep going on.. :-)

Gravatar

Commented by: reader, 21 August, 2010

Links for #2 and #3 are the same, I guess #3 should be corrected.

Gravatar

Commented by: Web design hippo, 23 September, 2010

These are awesome!

I really like the animated ATAT :P

Gravatar

Commented by: Brett Widmann, 4 December, 2010

This is a great collection of examples. Thanks for sharing.

Gravatar

Commented by: Mark, 9 April, 2013

Take a look at this one to see how far you can go with ONLY css

http://markqian.com/css3

  • swift hero2x
    2014-07-03

    Meet Swift, Apple’s New Programming Language

    Apple unveiled several new goodies at its annual Worldwide Developer Conference (WWDC) held early in June in San Francisco, but none excited the developer attendees more than the introduction of Swift, Apple’s new programming language. It eclipsed even the news of iOS 8 and OS X Yosemite, Apple’s latest versions of its operating systems. Ordinary consumers might not understand the developer frenzy over Swift, but they soon will feel the aftershocks once the next generation of Swift-based apps comes to their beloved Apple devices.
  • statamic
    2014-06-20

    15 Flat File CMS’s for Building Fast, Lightweight Sites

    Since 2009, we’ve been writing about content management systems (CMS’s), a popular and sometimes controversial topic.
  • bitcast
    2014-04-28

    Learn How to Code For Free At These 12+ Interactive Sites

    These days, it seems it’s not enough to know how to operate your computer or hand-held device and how to use the Internet. These days, if you’d like to become competitive in the job market or to keep up with rapidly changing technology, you need to know how to code. Information technology is now so pervasive in our lives, that even designers, architects, writers, marketers, other non-technical professionals, and even kids need to know—or at least appreciate—the language of computers and Internet tech: code.
  • 62012cts
    2014-03-28

    Create a WordPress Child Theme in 5 Easy Steps

    Creating a child theme in WordPress isn’t as difficult as it sounds.
  • 2013-12-04

    The Top Web Design Trends in 2013

    The Internet, like all of today's most popular technologies, is constantly changing in order to adapt to user needs, technological demands, and innovations that entrepreneurs all over the world have developed to make things a bit easier on the average user. Along with far-reaching technological changes and advances, the Internet is always making aesthetic transitions between different trends in web design. Just a decade ago, the average website was just 700 pixels wide, with fonts that were about 10 pixels in total height and images that were grainy, small, and not leveraged quite as well as they are today.
    design trends 2013
  • menu design index
    2013-11-19

    Designing the Navigation Menu

    Ask any designer what single element of any website can make or break its mass appeal and usability, and they'll almost always respond with the same word: Navigation. Today's Internet users are, generally speaking, comfortable with the medium. They've had decades to get used to things like search results, URLs, blogs, online product listings and more. No matter how commonplace the Internet has become, however, and now matter how familiar users are with the way things work, there is one thing that still varies between websites and can make or break any transaction. Navigation elements on a page must adhere to principals of basic design, straightforward labels, and easy-to-read characteristics that draw users in rather than send them away.
  • website speed
    2013-11-06

    Make Your Website Faster

    If the Internet has made just one substantive change to the way people behave or develop their expectations, it's safe to say that it has made everyone a bit more impatient than they used to be. This impatience manifests itself in a number of ways, from an emphasis on shorter paragraphs and brevity in blog posts to page load times that are lightning-fast and designed to impress. Today's website owners have a number of really great benefits to enjoy if they simply ensure that their website is as fast as possible, loading within a fraction of a second on the vast majority of computers around the planet.
  • 2013-10-22

    Two Easy, In-Person Usability Tests for Website Designers

    Since the dawn of modern, standards-based web design, a number of competing firms have been trying to create the Internet's top usability validator. These tools focus on behind-the-scenes coding and tags, including things like alternate text for images and reader-friendly text that works well with today's most popular screen reading applications. The problem, of course, is that these online validators can't actually use the website. They're simply analyzing the site's code, looking for certain tags and pronouncing the site widely accessible and usable for a broad audience. In practical applications, a usability or accessibility "validator" is more theoretical than practical. People, not robots, are going to be using the site, and they're going to see the results of the code rather than the code itself.
  • online store design index
    2013-09-18

    Designing for an Effective Online Shop

    Over the past few years, the Internet has transformed from a place where larger, online retailers thrived, into one that is increasingly allowing small business owners to pursue national and international markets. That means great things for entrepreneurs who are looking to increase their profit margins and dramatically increase their reach, but these benefits must be carefully managed so that they meet or exceed expectations. Indeed, it would be a mistake for business owners to assume that their mere presence in the online environment would guarantee the success of their e-commerce venture.
  • 2013-09-03

    The 7 Most Common CSS Mistakes

    Though CSS is considered one of the easiest and most accessible ways to create modern, standards-based websites, the process of writing a stylesheet still lends itself to a few common errors among even the most seasoned designs. Fixing these errors will result in even more consistency within the design, and they'll create a smaller and faster-loading file that simply works better with the wide variety of both mobile and traditional broadband connections that today's consumers are using. By fixing these errors or avoiding them entirely, designers will simply create a better-looking, more compact site that more easily translates across multiple platforms.
    css index

List all related articles..

Overall Best Web Hosts

1. $1.99Review
Visit Lowest Price Guarantee
2. $2.95Review
3. $4.95Review
4. $3.99Review
5. $3.49Review
Visit Lowest Price Guarantee

Get hosting confidently - When signing up for one of the tagged hosting plans above you can be confident that you are getting the lowest price available for that plan.

Buying Guide

Can't decide what hosting is right for you? Answer 2-5 questions and get your perfect hosting match!

To Questions

User Reviews

Make your voice heard. Review your web hosting provider - good or bad.

  •  
  •  
  •  
  •  
Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review