11 Stunning CSS3 and jQuery Powered Tutorials

Introduction

The introduction of CSS3 has brought a whole lot of excitement to web development industry. With the support of CSS 3D Transform, what was impossible before, it's possible. CSS3 used to be just a styling technology common used in web design, but with the introduction of animation properties and 3D transform properties we can easily create cool animation, plus with the combination of Javascript, stunning effects are made!

In this post, we have gathered 11 CSS3 related tutorials that show you how to make stunning effects, some are experimentals, but rest assure, these are the future of CSS.

Make an accordian style slider in CSS3An accordian slider(hover based) made in CSS3 using very less code. No Javascript used. The markup and the CSS logic are very simple. This slider is scalable to any number of images and can be easily used in websites. A very functional piece, not just fashion.

Creative CSS3 Animation MenusThe idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations.

Swatch Book With CSS3 and jQueryThis tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one.

Item Blur Effect With CSS3 and jQueryThis tutorial shows you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them.

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.