CSS: Ultimate CSS Gradient Generator

Tweet

Today, in this short post, I would like you to know about a wonderful tool aimed to the creation of gradients with CSS.
The name of the tool is Ultimate CSS Gradient Generator, a powerful Photoshop-like CSS gradient editor from ColorZilla.

If you need to create gradients with cross-browser compatibility, the tool is quite powerful. It outputs the CSS code for IE9, FF3.6+, Chrome, Safari4+, Chrome10+, Safari5.1+, IE10+, IE6-8. As you can see it covers really most the browsers.

CSS: cross browser gradient (a tutorial)

Tweet

I've already talked about CSS gradients in the past, but mainly together with other CSS features like box-shadow or border-radius. In the following article we will create only gradients for a simple box... and we are going to make it work for any browser. This time no compatibility issue, then.

The style
This time I will start straight from the code. Afterward I am going to explain how we can customize it, understanding what's behind.

.gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
  height: 200px;
  width: 200px;
  color: white
}

The result for the above code will be the following box:

This is the styled div with our gradient.
As you can see, the background has a gradient going from top to bottom, from colour #444444 to color #999999.
Let's now go on with the explanation of the style

Web application’s menus

Tweet

When developing a web application, one of the things I am almost always dissatisfied with is menus. Thinking back to my first web app, I now realise how much I pondered and rethought about the user interface and about the way all the single functions are logically made available to the user. That is usually done through an intelligent menu.