Video tutorial: How to create beautiful ‘Apple like’ graduated backgrounds on your Woothemes website

[twitter style=”horizontal” float=”left”] [fblike style=”standard” float=”left” showfaces=”false” width=”450″ verb=”like” font=”arial”] [pinterest count=”horizontal” float=”left”][google_plusone size=”standard” float=”left” annotation=”none” language=”English (UK)”][divider_flat]The Wooframework from Woothemes comes with some ‘out of the box’ tools such as the info box to help you design a great looking website. However there are times when you will want to tweak the standard design of the info box to make it more elegant.  In the video below I show you how to create a beautiful graduated background that you can easily reuse on your website.

And here is the CSS code…

The CSS for the background graduation has been created at www.colorzilla.com. This CSS needs to be pasted in your custom.css file. Once you have updated your custom.css, then all you have to do is create a new info box and you will see the results.

.woo-sc-box.normal {
padding: 9px 15px;
border-width: 1px 1px;
border-style: solid;
border-color: silver silver -moz-use-text-color;
border-style: solid solid solid;

background: -moz-linear-gradient(top,  rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#08000000′, endColorstr=’#00000000′,GradientType=0 ); /* IE6-9 */

}