4 Useful CSS3 Tutorials

1. 3D thumbnail hover effects

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. In the example there are used thumbnails that will reveal some more information on hover.

Demo Download Source

2. How to create animated tooltips with CSS3

This is a tutorial that helps you create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.

Demo Download Source

3. Enhance required form fields with CSS3

Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones. The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but in this tutorial you will learn to create a little interactive effect for a better visualisation of required fields.

Demo Download Source

4. Direction-aware hover effect using CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery.  The idea of this tutorial is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.

Demo Download Source

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s