jQuery without photoshoped buttons


I’ve built a website for my own use using a free online template (see http://axiolexis.ro). However, because the buttons of the jQuery slides are designed in Photoshop, not only is it difficult to change their name or designation, but I am prevented from modifying the background because the rounded corners of the jQuery panel are artificially created by means of a cheap workaround (i.e. the adjacent zone of the round corners is not trully transparent).
I just want to know if the jQuery menu panel of my website can be designed without the use of photoshoped images for the buttons and with true rounded corners. I mean, can one create all of the chiaroscuro effects regarding colour, lighting and shadowing for the jQuery buttons directly my means of CSS, so as to do without the need of photoshoped buttons, or not?



In answer to your question then it depends on what browsers support you want and how far you want to go with it?

With css3 you could use linear gradients for the shaded background, transforms to rotate the text and border radius for the round corners.

Or for older browsers you could use images for the shaded background and let them have square corners. You could use transforms for newer browsers to rotate the text and there is some IE proprietary code that will work for older iE version. You can see an an example here.

It all depends how much work you want to put into it:)

I have an example here that we did for [URL=“http://www.sitepoint.com/forums/showthread.php?860673-Test-Your-CSS-Skills-Number-41-Expanding-divs&p=5135320#post5135320”]a CSS quiz but doesn’t have support built in for older browers though (it doesn’t use javascript either).