Posts Tagged ‘gradient’

How to Create a 3D Button Using CSS and a Gradient Image

Monday, January 28th, 2008

While I was browsing through dzone today, I stumbled on this 3d button css tutorial by Dave Woods.

Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…
(more…)

How to Create a Gradient Background Image in GIMP

Thursday, January 24th, 2008

Sample Gradient BackgroundThe other day I wrote about how to add a gradient background to a css tooltip. So I thought it might be a good idea to walk through how to create the actual gradient image.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.
(more…)

How to Add a Gradient Background to a CSS Tooltip

Monday, January 21st, 2008

In an earlier post, we learned how to create a tooltipKind of like this boring, gray tooltip. using CSS. I walked you through the mechanics of creating the tooltip and left the actual css styling up to you.

Today, we’ll take a look at how to make this tooltip look a bit nicer - using a gradient background and some extra styling.

(more…)