Web 2.0 how to design menu and rounded tablets

[888]

As featured here:

http://webdesignfromscratch.com/production.cfm

How do I do that top menu and the side menu, including the effects of them.

Also how do I get the rounded table corners or is that just a gif

How on earth did they manage to get curved gradients tablets here?

http://creativecommons.org/licenses/by-nc-sa/3.0/

Many thanks guys.

[Wickham]

Two-part images are used like http://webdesignfromscratch.com/images/nav-contact2.jpg (the right side is lighter than the left although it's difficult to see) and the hover code moves the image sideways so that the other part shows.

#nav-contact a {background:url(images/nav-contact2.jpg) 0px 10px no-repeat; width:84px;}
#nav-contact a:hover {background-position:-84px 10px;}

The first value is the horizontal position and the second value is the vertical and the image is 168*66 so that moving it from 0 to -84px shows the other half.

The same with the #left-col background images like
http://webdesignfromscratch.com/images/s-basics.gif 1000*22px (just the icons) coupled with text changing color on hover and these styles:-
.s-basics a {background:url(images/s-basics.gif);}
.sections li {background:#f1f1f1 url(images/s-bg.gif) top left repeat-x;}
.sections a:hover, .sections a:active, .sections .on a, .cross-links a:hover, .cross-links a:active, dt a:hover, dt a:active {background-position:-462px 50%; background-repeat:no-repeat;}
.sections a:hover, .sections a:active, .cross-links a:hover, .cross-links a:active {color:#004;text-decoration:none;}
.sections li a:hover, .sections li.on a {background-color:#fff; color:#f00;}

The curved gradient in the other page is just a special image:-
http://creativecommons.org/images/deed/deed-head-yellow.png
made with image software like Photoshop.