Tricks with CSS

| Category: Web Design

There are some really great things that can be done with stylesheets these days. For instance, I've been looking for ways to stylize buttons and small graphics, gradient backgrounds, borders, etc. so as to lighten the load on a page. Here is one example of the work I've experimented with.

I saw a nice “download” button today, and thought I’d see if I could re-create it in CSS. Here’s the graphic:

Next, I decided to try breaking it down into elements. There is a dark border around the item, a green gradient background, white text and a green shadow around the text. I have a few tricks for completing this:

  1. For analyzing the image, you can use your own graphics software, or go to pixlr.com and upload the image (which is what I did). The border turns out to be close to #666. The shadow on the text is close to #351. The font used looks to be Helvetica (possibly Arial) and set to bold. The width is 110px and the height is 31px.
  2. The gradient is a little harder. I also have a trick for this. Inside pixlr, I cut down the image to where there is only the gradient showing (trim the border, then crop the image to just a section showing the green gradient). I use the Ultimate CSS Gradient Generator – this site allows you to upload an image that contains gradient. The site will analyze the gradient and spit out the CSS-equivalent code for you.

Click the link below to download the complete HTML page, including all CSS used and a copy of the graphic used above.

Leave a Reply

%d bloggers like this: