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

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

CSS: CSS3 generator and CSS3 Please!

Tweet

We have talked a lot about CSS3. The not-anymore new standard is giving some of us headaches. In this post I will show two incredibly useful tools to automatically create styles for your pages.

CSS3 Generator

CSS3 Generator is a simple page with a few sliders helping to create styles for a container. Basically, moving the sliders and selecting from color pickers, we can change:
1) border radius;
2) box shadow;
3) background gradient;
4) opacity.
When we are happy with the look of the container (through the live preview), we click "Get the code!" and a pop-up with the style sheets opens, ready to be used.

The generator is a very useful tool, quick and easy to use. One important note: CSS3 Generator can create style sheets with minimal IE7 and IE8 support. Impressive!

A big thanks goes to Eric Hoffman and Peter Funk for this remarkable tool.

CSS3 Please!

Another useful page is CSS3 Please! In this case, we have a styled page, where we can toggle CSS3 effects on and off. There's a live preview of our actions, so that we can understand what every single style is actually doing to the container.
The page is commented so it is a very interesting playground and learning tool. Through it, we can really learn what the rules are doing, how they apply to different browsers and finally decide what to - eventually - use in our web pages. In addition to all that, we can change the values of the styles and see the resulting effect, applied live to the container.

The original project was developed by Paul Irish and Jonathan Neal with many other nice people contributing. The project is an open one: anyone can contribute and new features will be introduced in the future.

Hope this will help you in building remarkable style sheets for your web pages. Please, leave your comments in the section below.