10 Awesome CSS Designed Websites

10 Awesome CSS Designed Websites

Just a couple of weeks ago,  Peter Gasston, author of The Book of CSS3 made up a list of what he thinks is the 20 best websites powered by CSS. 

Out of his 20 recommended sites, I’ve made my own picks and narrowed the list down to 10. But you can always check out the full list in the link above. So anyway, here’s my Top 10 of Mr. Gasston's Top 20.

Kyan – Designed by Robin Whittleton of Surrey-based agency, Gasston described its design as being all-around and sleek, and that the real highlight would be the carousel’s exploding animation on the homepage. The explosion is accomplished through the use of transform and keyframe animation. Interestingly enough, the developer had to create it in Flash first before implementing it to CSS.

Google+ – Aside from Apple's iPhone 4S web page, none of the other candidates that made Gasston's list have the same huge reputation as Google+'s, and that didn't even make our Top 10 list. It just goes to show you how much of the effort the people over at Google has put into their design has paid off. A great example to showcase this site's amazing design using CSS is the way you manage your circles in you Google Plus account.

Ben the Bodyguard – As mentioned by Gasston, clever scroll effects were all the rage this year and perhaps the one that showcases this feature in his top list came from this iPhone app's website. Have fun with the effects as you scroll down the site while Ben the Bodyguard explains to you the benefits of having security.

Beercamp – Now this one from Beercamp is definitely one of my faves, and that's coming from someone who's not even an avid or even casual beer drinker! Why? Because going up and down the scrollbar causes you to zoom in and out of the site, instead of the usual up and down or side-to-side scrolling. Expect to see a mind-bending surprise when you zoom in all the way to the center. 

Slavery Footprint – This is another cleverly designed site which features a neat animated effect as you scroll down the page. It uses some fantastic transition and transformation effects to provide an engaging experience for the visitor. Overall, the design is only equaled by its worthy cause.

Cultural solutions – This is another long scrolling site but what sets it apart from the rest is that it, as Gasston says, uses "a nice subtle parallax to keep you interested as you move down the page." It even has a scrolling marquee! And we thought they were gone for good.

Nike Better World – Quite notable for its use of bold photography and clever use of parallax, Nike's Better World website features mostly CSS2.1 combined with JavaScript but uses web fonts for the subheadings, including their own custom font face for the h3 elements.

Union Station Neighborhood, Denver – A tastefully designed website created by Sean Klassen, this one is built with clean and modern CSS. While web fonts and RGBA color values are aided and augmented by transformations and transitions to make browsing this site a real pleasure, the timeline is definitely something that's really worth checking out.

Dazed Digital – This site is created using masonry.js jQuery plugin to provide the markup and CSS, which is also enhanced by the use of transitions for some of the interactions and web fonts for subheadings.

Ultranoir – Ultranoir's combination of JavaScript and CSS here is just sheer brilliance! The extensive use of transitions, transforms and keyframe animation makes this one dynamic website. However, the problem Gasston has with this candidate is its backwards compatibility -- there's very little of it. It won't work in IE7 or below, or any browser with JavaScript disabled.

For an awesome jQuery tutorials you can visit the site