From CSS menus, animation to 3D objects on websites, web designers today create all of them. Manually creating these can be a little time consuming and require more knowledge about CSS, with this list of handful websites you can create the desired effect for your project in just minutes using a sleek user interface and increase your productivity.

1. Spritemapper: Merge multiple web pages into one.
2. Buttons: Create highly customisable, modern and flexible web buttons.
3. CSS Matic: This non-profit CSS tool can be used as a gradient generator for creating amazing gradients.
4. Layer Styles: Use this HTML5 app for an intuitive approach towards CSS3.
5. CSS Menu Maker: Use this tool if you need to create custom CSS drop down menus easily.
6. PCSS: You can use this PHP-driven CSS Preprocessor to define variables, nest classes and other things that allow CSS code to be written quickly.
7. CSS Compressor: Increase the loading speed and reduce the bandwidth of your webpages.
8. Skelton: This tool helps you to easily and quickly develop websites that can adapt to different screen sizes.
9. Tridiv: Use this to easily create 3D CSS shapes.
10. CSS 3D Transform: This online CSS tool will allow you to perform level Transofrms online.
11. CSS3 Fancy LightBox: This tool is very similar to the original Fancy Box tool from the same creators. It just contains more classes.
12. Prefixmy CSS: An easy way to prefix CSS code.
13. CSS3 Pie: This can be used for putting in useful decorative features on Internet Explorer 6-9.
14. Sencha Animator: Create animated images, text and design buttons with emebedded analytics and gradients.
15. Patternify: Create beautiful CSS patterns.
16. TopCoat: This is a library of CSS classes that contains form elements, sliders, checkboxes and other things.
17. EzxtractCSS: Extract ids, classes and inline styles from an online HTML document into a CSS stylesheet.
18. Magic: This is a CSS stylesheet, which contains various CSS effects under different categories.
19. SkyCSS Tool: This tool allows you to create CSS classes, while almost completely avoiding manuscript code.
20. CSS Text Shadow: Use this tool to generate text shadow buttons.
21. Responsive Web CSS: This web-based tool will allow you to create a responsive layout skeleton with drag and drops.
22. CSS Patterns Gallery: This website displays creative patterns using CSS3.

Each page have a navigation area, which links to all the other pages within that section of the website. This is great, but in order to go to, say, the FAQs page from the home page, you'd first have to go to the about page, then on to the FAQs from there. This is by not acceptable.With the help of some advanced selectors a dropdown menu can be easily created with CSS. Follow the step by step process of creating your own CSS Dropdown Menu.

The menu we’ll be creating have two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown.

Download Drop Down Menu

The HTML Structure

Firstly we need to create a HTML structure for our CSS menu. We’ll use HTML5 to make the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

We will add the first sets of sub-menu under the “Tutorials” and “Blog” links, each one being a complete unordered list inserted within the <li> of its parent menu option.
The secondary sub-menu is nested under the “JQuery” option of the first sub-menu. These links are placed into another unordered list and inserted into the “JQuery” <li>.

The CSS Styling

Let’s begin the CSS by getting the basic dropdown functionality working. First hide the sub menus by targeting any UL’s within a UL with the display:none; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

The main navigation bar is now all styled up, but the sub menus still need some work. To make sure they fly out under the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom). The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background.

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

Download Tutorial.