Wednesday, October 22, 2014

a better posting on gradients in CSS

In contrast to this, I find the following much less confusing.

#banner {
   height: 15px;
   background-color: #EE3124;
   background: -webkit-linear-gradient(180deg, #EE3124, #C41230);
   background: -o-linear-gradient(180deg, #EE3124, #C41230);
   background: -moz-linear-gradient(180deg, #EE3124, #C41230);
   background: linear-gradient(180deg, #EE3124, #C41230);
}

 
 

The first parameter in the last four lines of code dictates which direction the gradient runs. In this case it is from top to bottom. Easy. Note also that I set a flat background color for IE7 above the four lines of modern magic.

No comments:

Post a Comment