Dynamically Create Rounded Button

My boss wants me to create rounded button with dynamically color generated by database. At that time, I was dilemma because I know, I couldn’t crop rounded corner images with different color. Because, as I told above, these colors will come from database. So, I consider other ways and how to solve this problem. Eventually, I gotcha. Here is as follow:

StyleSheet

<style>
<!–
span.left {background:[fill_your_color] url(“rd_images/rounded_left.gif”); width:8px; height:25px; }
span.center {background:[fill_your_color]; height:25px; border-top:1px #000000 solid; border-bottom:1px #000000 solid; color:#ffffff; text-align:center; font-weight:bold; font-family:arial; padding:2px 0px 0px 0px;}
span.right {background:[fill_your_color] url(“rd_images/rounded_right1.gif”); width:8px; height:25px;}
–>
</style>

HTML

<span class=”left”></span><span class=”center”>Caption</span><span class=”right”></span>

OUTPUT

output

Download rounded images :

jQuery Nicely Combo

I’ve got to create nicely combox for my client. In first thought, I want to do with stylesheet. But, I can only change font-family, color, background and border. If I do so, they won’t like because it’s flat and changed colors. That’s why I decided to create with jQuery. After few moment, it has been finished.

http://ppshein.freehostia.com/combox/example.htm (Mirror 1)

http://pyaephyoeshein.freehostia.com/combox/example.htm (Mirror 2)

If you wanna use jQuery, you must know a little bit of javascript at least.