Using CSS3 With Gradients
In one of my previous blogs, I wrote about my desire to move forward with converting my site to HTML5 and CSS3. Obviously I can't make a FULL transition due to browser backward compatibility, time, and what is supported with newer browsers. However, the longest journey begins with a single step. My first step in this transition is to replace the top image header, with a pure CSS3 solution. Having the ability to apply gradients with CSS3 I was able to completely remove that banner image with just a few lines.
Simple yet effective.
#header {
background: #FBFBF9;
background: -webkit-gradient(linear, left 45%, left 90%, from(rgba(253, 251, 252, 1.0)), to(rgba(207, 204, 199, 1.0)));
/* for FF 3.6 */
background: -moz-linear-gradient(rgba(253, 251, 252, 1.0) 45%, rgba(207, 204, 199, 1.0) 90%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FDFBFC, endColorstr=#CFCCC7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FDFBFC, endColorstr=#CFCCC7)";
text-align: right; padding: 5px 0; }
Comments [2]