CSS3 transitions are great and they allow us to create many stuff that we used to see only in JS.

However, compared to JavaScript alternatives, they are not flexible enough in easing functions and, even cubic-bezier (although it is pretty powerful) has its limitations.

Morf.js, is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions including bounce, spring, elastic and much more.

Once an easing function is triggered through JavaScript, it is created using webkit-keyframes.

The library uses Shifty.js for tweening regular CSS properties and it is WebKit only.

Codrops, a creative web design and development blog, has created a detailed tutorial on creating a beautiful slider powered only by HTML and CSS3.

The slider not only uses the transition property but also changes the background-position of the given background images accordingly to create a parallax effect.

Slides can be browsed either with the bullet-navigation (styled radio inputs) and/or with the prev-next links.

Both of the effects are very smooth and the slider adapts itself perfectly to any width (responsive).

Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

So, the shadow's location and size is determined by the element's distance to the mouse pointer which ends up in a cool effect.

Like said, the plugin accomplishes a simple job but can help creating attractive outputs when used smartly.

CSS3's properties enable us to create many different shapes by styling a single element.

CSS3 Shapes is a project that shares the styles for many different shapes including triangle, diamond, star, comment bubble, egg, heart and more.

For sure, not all of them are functional for daily use but they are definitely good for inspiration and improving our CSS(3) skills.

Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects.

The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements.

Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers.

P.S. You should also check the experiments page of hakim.se to see various other exciting stuff.

Ian Hansson, a designer/developer from London, has created a fully-functional responsive slider with CSS3 without any JavaScript.

It is similar to JavaScript sliders; works by floating all of the content areas (articles) next to each other and hides the overflow. After that, animating the margin of the inner <div> gives us the next item.

There is an optional JavaScript fix for an iOS-only issue and the slider works well in modern browsers.

P.S. There is no download provided and "view source" is your guide.

As almost every browser has their own CSS prefixes (-webkit-, -moz- or -o-) for some properties, we usually need to add all of them to our stylesheets.

This is not only time-consuming, but also hard to maintain, increases the sizes of CSS files (that can end up in slower loading times and higher bandwidth usage).

cssFx is a JavaScript file (weights 2.5kb) that creates vendor-specific CSS3 properties required for old and new browsers on the client-side.

It has support for most of the CSS3 properties and works with the majority of browsers (including IE6).

Sequence is a jQuery plugin for sliding content without a default theme but leaving the complete control to you.

Any type of content can be used and they are displayed in an infinite slider logic.

It uses a semantic markup and supports responsive layouts + touch devices and swiping.

There are various unique transitions built with CSS3 (which requires modern browsers) and degrades gracefully for older browsers.

Sequence has options for controlling the functionality including the control of prev-next buttons, auto-play being on/off, the slide to be displayed on initial load, transition types and more.

Also, there are callbacks on every level interaction for further customizations.

Today, the development toolkit of many web designers/developers consist of the features that come with HTML5, CSS3 and probably jQuery.

The talented team at IconShock has created a set of web technologies icons exclusively for WRD readers with items from this kit and Ruby on Rails (considering the ease it provides).

There are 24 icons which come in transparent PNG and completely layered AI files.

Hope that they can add a visual beauty to your designs when referring to these technologies and they are free to be used in both personal + commercial projects (icons can not be redistributed without permission).

Designer: Iconshock

Icons are created by the guys of Iconshock, with more than 350 icon sets on its stock, the same designers of the fantastic free bundles for WP lovers behind WordPressThemeShock and the design blog WebDesignShock.

The CSS3 Test is a web-based test suite for finding out which CSS3 properties are supported by the browser being used.

It checks many features like backgrounds/borders, transitions, media queries, fonts, animations and much more.

Multiple testcases are ran on each element and this can be displayed by simply clicking to items.

The application is a must-bookmark to quickly check the issues on each property for shaping our styles accordingly.