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/de...ead-yellow.png
made with image software like Photoshop.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.