Posted By

kanouf on 12/31/10


Tagged

CSS3 gradient linear less lessjs


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jackomono
f1r3fl3x


Less Css 3 color linear gradient


 / Published in: CSS
 

URL: http://lostwebdesigns.com

Use as follow in you style.less file :

.example{
    .linearGradient(0, #fff, 50%, #ccc, 100%, #fff);
}
  1. .linearGradient(@stop1:0, @color1:#ccc, @stop2:50%, @color2:#ddd, @stop3:100%, @color3:#ccc){
  2. background-color:@color2;
  3. background:-webkit-gradient(linear, left bottom, left top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
  4. background:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  5. background:-ms-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  6. background:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  7. background:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  8. -pie-background: linear-gradient(@color1, @color2, @color3);
  9. filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @color1, @color3));
  10.  
  11. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: scruffian on March 26, 2011

great, thanks. presumably the last 3 lines it should be @color1 at the end, not @color3...

Posted By: scruffian on March 26, 2011

of course i meant "presumably the last 3 lines it should be @color3 at the end, not @color1..."

Posted By: kanouf on March 31, 2011

Scruffian, you are so right, thanks, i corrected it!! ;)

You need to login to post a comment.