Advanced Search

Less Css 3 color linear gradient

/ Published in: CSS
Save to your folder(s)
Use as follow in you style.less file :

<pre>
.example{
.linearGradient(0, #fff, 50%, #ccc, 100%, #fff);
}
</pre>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

URL: http://lostwebdesigns.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.