Sometimes text rollovers are not the only buttons requested for web pages. Rollover buttons with images for onmouseover and onmouseout states have been coded for some time. Dreamweaver is very useful for simple ‘point and click’ functionality here as it quickly sets up image rollovers. However, clean code needs minimum JavaScript and more xhtml compliancy; in other words, use CSS.

CSS solves many issues when it comes to creating rollover states and is quite straightforward if you have basic CSS skills. I shall show you step by step how to create image rollovers using CSS only.

Read more…

Popularity: 2% [?]

As designers, if we are truthful, there are some aspects of the job we dread doing, either because they are repetitive, not challenging, or just because we don’t like doing them. Those things can range from making yet another CSS design with rolled corner element or to such things as tweaking font attributes to get “that look” that we wanted. Here are some sites and tools that will help you be more productive, and take out some of the boring aspects of design.

Clearing CSS Rules
Read more…

Popularity: 2% [?]

There are many CSS tools available that claim to make a designer’s life easier. Many are as simple as ‘point and click’ and others need a little CSS code experience to gain the full benefits. Either way, if you are new to CSS or struggling with your web page template, then first consider these 5 tools I shall review here.
Dreamweaver CSS4 users will be accustomed to a set of CSS tools being available. Coders like to reduce their development time as much as possible particularly freelancers whom have deadlines to meet or they risk not being paid. In these situations a non-compatible template causing browser display issues can damage a project life cycle.

If you’re a designer and need a handy toolset for CSS work, these useful tools will keep your creativity flowing and not place you in design hell.

Read more…

Popularity: 4% [?]

One of the more effective parts of a website is it’s color scheme. A site with too many colors or colors that don’t match or colors which annoy the users could cause large issues. Humans are visual beings, and color is one of the things that will lead us to liking or disliking something, or in our case a website. Here are five simple to use resources which will make it easier to choose colors for your website.
Read more…

Popularity: 10% [?]

“ MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API ”

In this post I’ve selected 8  Mootools navigation,dropdown and sliding menu tutorials. These tutorials will help you create better web 2.0 effects.

1- Nice animated menu using CSS and Mootools

This tutorial illustrates how to implement a nice animated menu using Mootools and some lines of CSS and HTML code ready to reuse in your project.

2- Creating a Sliding Menu Using the MooTools Framework

Tutorial here will show you how to create a sliding menu using the MooTools framework, you are required to have basic knowledge of HTML, you don’t need to know JavaScript to follow this tutorial, but JavaScript will help you understand what the code actually does.

Read more…

Popularity: 23% [?]

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

In this post I’ve selected 13 jQuery navigation menu tutorials that you can learn from them how to impalement your own jQuery based navigation and have some great effects.

Before getting stared you maybe interested in looking my post about making navigation menu using CSS and Adobe Photoshop.

[13 hand-picked Vertical and horizontal CSS Menus]

1- How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect.

Read more…

Popularity: 90% [?]

This is a  list of vertical and horizontal CSS menus, it includes 13 various styles of navigation menus, vertical menus, and tab menus. Navigation menus is one of the most important elements for web design.
This post has two parts:
1- In the part one I’ve put some tutorials and snippets for making vertical and horizontal CSS menus.
2- And the second part introduces you some web-sites for download beautiful CSS menus.
I hope you to enjoy them.

CSS Menus

Vertical Menu with Hover Effect using CSS

Creating a three-level rollover vertical menu with CSS

Using CSS and HTML to create menus is simple and efficient, as it allows you to build and expand the menu by adding new levels and items easily. In this tutorial, we’ll build a three-level rollover menu that expands vertically when the user moves their mouse over the items.

CSS Drive vertical menu links

Vertical menu links with an image rollover, achived by changing its background image. The height of each link here is deliberately set to be shorter than that of its background image, which can create an interesting clipping effect depending on the image used.

Read more…

Popularity: 48% [?]

Progress Bars is one of the most interesting components that web designers like to use in their projects.

They can be used in various places such as: page loading, redirecting, uploading files, sending information using Ajax and so forth.

In this post I’ve made a wonderful package of progress bars.

By reading this post you’ll be able to make some beautiful progress bars for your own use.

I’ve grouped them into four parts:

1. jQuery progress bars

2. JavaScript and DHTML progress bars

3. Create progress bars using CSS

4. Create progress bars using Photoshop

I hope you to enjoy them.

jQuery Progress Bars

jQuery.UI ProgressBar Widget

HOWTO: PHP and jQuery upload progress bar

Read more…

Popularity: 38% [?]