strimble

Recently, I changed the index page of my site. One thing I added was a CSS linear gradient to the boxes that display content. I had a lot of fun trying out the CSS gradients and learning how to use them. I also learned that they’re so easy to create. I believe that they’re much better than just using images as gradients. I’m not a big fan of images anyway, unless they’re photographs. I try to keep the amount of images to a minimum on my site. A few reasons that I prefer not to use many images are they take more time to display than just straight HTML and CSS, it’s another file to load on the client, you have to use Photoshop to create them, adding an image as a gradient sometimes adds more unnecessary markup to the page (think the sliding doors technique).

Currently, the only browser supporting the CSS gradients that I’m about to explain is Safari 4 beta. I’m hoping that more browsers will support them in the future though. Another nice thing is that they degrade nicely, since they’re CSS. So, if a browser doesn’t support CSS gradients, it just won’t display the gradient. Also, you can use an image of a gradient as the background for browsers that don’t support CSS gradients.

So, I’ll explain how I created the CSS gradients on my index page. First, I have some divs on the page and I gave them a class name of “feed_result”. Next, I added some CSS to make the box look like what I want it to look like.

#content .column .feed_container .feed_result {
    margin: 1px 0 0;
    color: rgb(56, 56, 56);
    background-color: #656565;
    border: 1px solid rgb(96, 96, 96);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

Then, I added the gradient. I used the linear CSS gradient, although there is also a radial one. I started with figuring out the colors that I wanted to fade into each other. These ended up being the background color of the content section, #555555, and the background color that I already had on the result box, #656565. Then, since I wanted these boxes to have a straight, vertical, linear gradient, I set the start point and end point to left top and left bottom. Then, I figured out where I wanted the color on top to switch over to the color on the bottom. I wanted this to be right in the middle. So, 0.5 is where I added the color stop and I used #555555 as the color. I’m just using this as the color stop for the example, but say that you want a gradient where the color on the bottom doesn’t start until the color on the top is 70% of the box. To create this, all you would need to do is change the stop from 0.5 to 0.7. You can use a decimal or percentage value for the stop. Also, you might want to have three colors in the gradient. So, to add another color in the middle, changed the color in the color-stop from #555555 to whatever color you want, like white. So, now, you might be asking why I’m even using a color-stop in my CSS. Well, the reason is that it visually pushes the color on the bottom down a bit. So, my gradient looks like this…

-webkit-gradient(linear, left top, left bottom, from(#555), color-stop(0.5, #555), to(#656565));

I then added this to the background in the CSS. The gradient can be used anywhere that you would normally use an image. So, now my CSS looks like this…

#content .column .feed_container .feed_result {
    margin: 1px 0 0;
    color: rgb(56, 56, 56);
    background-color: #656565;
    background: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop(0.5, #555), to(#656565));
    border: 1px solid rgb(96, 96, 96);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

So, as you can see, CSS gradients are kind of awesome. They’re easy to create, great for optimization by reducing file request for images, and they don’t make you add unnecessary markup to your pages.