10 Must Know CSS and CSS3 Resources and Tools

Today we are sharing with you this collection of 10 “you must know” CSS & CSS3 tools and resources you need to be aware of as a web designer/developer. You can check here what CSS3 features Internet Explorer supports. Although, none of the new exciting new features of CSS3 are supported, Microsoft announced to support CSS3 in Internet Explorer (IE9) so keep your fingers crossed while having fun reading todays plugin list!

1. Cool Sprites – Free overlapped CSS menu using CSS Sprites

In this tutorial you learn how to overlap CSS menu using CSS sprite.

Source + Demo

2. CSS Shorthand Clockwise Rule

Basically the first is the top margin and everything is going Clockwise right, bottom and left. Many of you may be familiar with this rule but also many others are starting with CSS so I hope this tutorial can be helpful.

Source + Demo

3. CSS Minification on the Fly

A simple solution to minify on the fly any CSS embedded in your site. This will involve a little knowledge of PHP and Apache rewrite rules.

Source + Demo

4. The Importance of the !important CSS Declaration

Even if the !important declaration should be used with caution, it’s a very useful and powerful expression that much deserves its place in our CSS world. This article offers a guide to what the declaration is, what it does and how you should use it.

Source + Demo

5. Guide to Font Sizing with CSS

In this post I’ve tried shedding some light on the matter and explaining the reason for this, and the different ways of doing font sizing on the web.

Source
Demo

6. CSS Paper Bird

In this experiment is a series of paper bird (crane) photos with different illumination positions I did some time ago, and I’ve created a pure CSS effect – without JavaScript – to show them one by one depending on the scrollbars positions.

Source + Demo

7. Multi-level Multi-column Multi Menus with Pure CSS

The best features of this menu is:
> Pure CSS (Only CSS)
> Multi-Level
> Multi-Column
> Multiple Menus in Single Page :)
> HTML List based
> Supports all the latest browsers
> Supports IE6 with Conditional Comments
> Browser Compatible
> Light Weight
> Flexibility – Can be work for 3 or more level – just need small tweaks in CSS

Source
Demo

8. Drop Shadow in Images: No extra markup

Drop Shadows adds extra glare to any design. They can be easily accomplished in any graphic editor; however it’s a little tricky in web programming.

Source
Demo

9. Beautiful Looking Custom Dialog Box with jQuery and CSS3

Learn how to create a beautiful looking custom dialog box with jQuery and CSS3 in this tutorial.

Source
Demo

10. Multi Columned Layouts in CSS3

Allows you to create columns in the form of a newspaper style column. News websites and blogs rejoice! Let’s take a look at how we can create columns with the new module.

Source
Demo