CSS3 tutorials are a dime a dozen. You can find tutorials on everything from animation to buttons to menus and more. Here is a top ten list of CSS3 tutorials that has a little bit of everything to give you a well-rounded look into what CSS3 has to offer.
FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms
FormBox adds improved usability to a site and also helps to keep its look clean at the same time. The tutorial explains how you can integrate forms into your drop-down menus to give site visitors easy access to important tasks. Using the forms integrated in the menus, visitors can log in to sites, leave contact information, and more. Since the forms only appear when you need to use them, there is no unnecessary clutter added to the site.
RocketBar – A jQuery And CSS3 Persistent Navigation Menu
RocketBar is a tutorial that should appeal to anyone who wants to provide a user-friendly interface on their site. The tutorial addresses the problem that many web surfers have. If you have ever scrolled down a long web page, you know how much of a pain it is to have to scroll all the way back to the top just to use a search function or access the site's navigation menu. This is quite common amongst many websites, and it can be irritating. RocketBar solves the problem by providing a persistent navigation menu. As you scroll, the menu will virtually detach itself from the top of the site and follow you down the page so you can access it without having to return to the top. The tutorial offers variations on the navigation menu so you can tweak it to fit your site.
Cool Sprites is a menu design that incorporates CSS sprites. CSS sprites is a method that combines multiple images into a single image. By combining several images into one, the number of image requests to a page are reduced. Since CSS sprites reduces image requests, it allows for faster page loading times.
In Cool Sprites, the menu tabs for different items overlap into a single image. Not only does this help speed up the page loading times, but it also creates an attractive overlapping effect that gives the page a unique look. Cool Sprites offers four different versions of the same menu and can be downloaded as a package for free for both personal and commercial projects.
If you are looking to spice up the text elements on your site, the text-shadow technique will allow you to do so with ease. You can apply the technique with RGBA to make text stand out and have a look that essentially jumps off the page. The use of RGBA for the shadow color instead of a solid color allows the shadow to blend in better with the page's color scheme. This provides for a more natural look and has another advantage as well. If you change your site's background color, the shadows will change as well. Text shadows can be created with a code as simple as this:
This technique can be used to make scalable buttons with RGBA that look great. The addition of the RGBA color mode to CSS3 helps to enhance and at the same time streamline CSS, and the folks behind the super awesome buttons used this to their advantage in creating colorful buttons of different sizes. Besides their appearance, these buttons can be made with half the CSS that would have been necessary if traditional hex values were used. The technique is solid if you want a way to add some flair to your design without a lot of extra code.