Home arrow Style Sheets arrow Ten Great CSS3 Tutorials

Ten Great CSS3 Tutorials

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.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
March 29, 2011
  1. · Ten Great CSS3 Tutorials
  2. · 5 More Great Cascading Style Sheet Tutorials

print this article

Ten Great CSS3 Tutorials
(Page 1 of 2 )

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.

Link: http://addyosmani.com/blog/formbox/

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.

Link: http://addyosmani.com/blog/rocketbar/

Cool Sprites

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.

Link: http://deepubalan.com/blog/2010/01/18/cool-sprites-free-overlapped-css-menu-using-css-sprites/ 

Text Shadows

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:

text-shadow: -1px 1px 1px rgba(0,0,0,.5);

Link: http://owltastic.com/2009/12/shadows-and-css3/

Super Awesome Buttons

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. 

Link: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials