Tip: Adding borders to elements

Wednesday, October 24, 2007 at 8:40 AM



Empty divs with a background color are a great way to add borders and shadows to GD elements. As an example, consider the edit box, which normally has a white background and no border. Add a colored div that's just slightly larger than the edit box, place it under the edit box, and you have a border.
a one-pixel, black rectangle
<div x="10" y="0" width="60" height="19" background="#000000" />
<edit x="11" y="1" width="58" height="17" font="Arial" size="9" />
Still think you can improve the look a bit? You can make a classic shadow by adding a lighter colored div under the border div, with the same size as the border but shifted a bit to the right and down.
a black rectangle with a grey shadow
<div x="12" y="2" width="60" height="19" background="#676767" />
<div x="10" y="0" width="60" height="19" background="#000000" />
<edit x="11" y="1" width="58" height="17" font="Arial" size="9">
Or stack a few divs for a fancier border:
multiple concentric rectangles
<div x="10" y="0" width="64" height="24" background="#222222" />
<div x="11" y="1" width="62" height="22" background="#BBBBFF" />
<div x="12" y="2" width="60" height="20" background="#000000" />
<edit x="13" y="3" width="58" height="18" font="Arial" size="9" />
If you name your borders, you can use JavaScript to change them as events happen. For example, to signal that an element has gained or lost focus, you can change its border's color, opacity, or visibility.

beveled rectangle consisting of many divsThe possibilities are truly endless. You can even manipulate the colors of more complex border designs to make an element look embossed, beveled, or extruded, as shown to the right. But don't go too crazy; for a complex design, it probably makes sense to use an img element instead of ten divs.

For more information on using divs, see Tip: Use divs to organize your gadget elements.

Have a tip you'd like to share? Send it to gd-developer AT google DOT com.

3 comments:

James [GD Team] said...

What a cool tip. :)

The Reader said...

Yeah really cool thing.. :)
Thanks.

vishnu said...

nice :) thank you very much for this tip