One of the neat things you can do with CSS3 is apply gradients. We use this heavily in our corporate skin, but they can be a bit confusing. We use this website in our skin.css for the Classic new to applying gradients, but it really doesn't get it to the demonstration aspect of the gradients. Using a gradient generator, I was able to find a way to specifically tweak in real time what the gradient would look like as I put the hex values in to the swatch, and it also gives you the opportunity to add colors using the green plus button to the right of the “Color Swatches” and show by the following screenshot:
I am sure this isn't the only one of these types of tools out there, and if you are a seasoned CSS veteran, then you may not need this tool at all. Regardless, here is the CSS that it generated:
background-image: linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -o-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -moz-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -webkit-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -ms-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #CD0074),color-stop(0.25, #E6399B),color-stop(0.5, #85004B),color-stop(1, #CD0074));
You can do some pretty crazy things with CSS and patterns, and since they are technically gradients, you could even skin Reverb with these. Practically, they might not really work, but conceptually, they are interesting. You can put a gradient on just about any of the elements we have on our page, but the trick is making it work with the text/icons that you are using, so proceed with caution when using gradients. At any rate, CSS can be intimidating but with the use of Skin.html and the right tools to help you along the way, it actually be somewhat fun! I have updated my wiki page, so you can download the pink corporate skin if you would like to practice customizing gradients.