The 9 Awe Inspiring CSS3 Websites of Quarter 1 – 2012

Alright so I might have been a little biased on these decisions, but I went with websites that I have run across and felt they deserved to be pointed out. They offer a lot of unique CSS3 features and give a great user experience without sacrificing performance or site structure.

Here are 9 awe inspiring css3 websites for the first quarter of 2012. Please enjoy!

Bagigia is an interesting website utilizing a full scale arsenal of CSS3 craftsmanship. The full scale screen image rotation is done masterfully and the diverse functionality while scrolling and providing image by image manipulation really enhances the user’s experience.

 

I love this website. The scrolling functionality of a single page website is great, but when you add on top the functionality of filtering and menu traversing, you get a very good product. The hovering effect on all images is done in CSS3.

 

Super Hero Mobile Relations has an extremely cool loading feature done in HTML5 and the site combined with CSS3 is great. The menu effect utilizes the pulsing feature in CSS3 which we covered in our previous blog / tutorial. The sprites used on this site are great. They really decrease the load time and shows that the author / developer knows how to save kbs.

 

My favorite feature for this website is the linear approach they took and made it very accessible through CSS. They had a lot of reveal features with their sliders where it would display an animation behind the scenes. It made the website very interactive.

 

Kryptis has two focus features that leave an impact on me. One is the animation of the loading at the start and the opening of the website similar to the doors on Star Wars. The second is the full screen image slider after the Star Wars doors open.

 

Mixpanel is a great application that analyzes data in their reporting system. The homepage has a neat CSS3 effect with images, hovering, and shadows. The actual backend is very feature rich and uses CSS3 to enhance the overall experience with rgb colors.

 

The Sencha framework is incredible for creating a responsive mobile HTML5 application with great CSS3 features. It uses a great menu system for running the application with only one physical web page and js combined with css power the responsive features that make it feel like a native application rather than a hybrid.

 

If you look onto the data page for Inigral, you can see the graphing functionality that will be a future tutorial here. It involves jQuery to power the bars from a rest state and adds the css property of height afterwards with an easing effect.

 

The backend of Hubspot has some great reporting features that utilize CSS graphing and simple functionality that appears to be nothing more than normal images, but is actually built on CSS3 properties that enhance the users experience and cut down on the load time.

There are a lot of CSS websites out there that deserve to be on this page. I choose the websites that I have run across and been inspired by. My portfolio has a load of CSS as well, but I felt like that would be self-promotion and this is more about getting inspired by CSS.