Advanced Search

Return to Snippet

Revision: 38387
at May 20, 2011 04:34 by kanouf
Updated Code 
.linearGradient(@stop1:0, @color1:#ccc, @stop2:50%, @color2:#ddd, @stop3:100%, @color3:#ccc){ 
  background-color:@color2;
  background:-webkit-gradient(linear, left bottom, left top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
  background:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
   background:-ms-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3); 
  -pie-background: linear-gradient(@color1, @color2, @color3);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @color1, @color3)); 

}

Revision: 38386
at March 31, 2011 10:10 by kanouf
Updated Code 
.linearGradient(@stop1:0, @color1:#ccc, @stop2:50%, @color2:#ddd, @stop3:100%, @color3:#ccc){
  background:-webkit-gradient(linear, left bottom, left top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
  background:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}

Revision: 38385
at December 31, 2010 12:23 by kanouf
Initial Code 
.linearGradient(@stop1:0, @color1:#ccc, @stop2:50%, @color2:#ddd, @stop3:100%, @color3:#ccc){
  background:-webkit-gradient(linear, left bottom, left top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
  background:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color1 @stop3);
  background:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color1 @stop3);
  background:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color1 @stop3);
}
Initial URL 
http://lostwebdesigns.com
Initial Description 
Use as follow in you style.less file :

<pre>
.example{
    .linearGradient(0, #fff, 50%, #ccc, 100%, #fff);
}
</pre>
Initial Title 
Less Css 3 color linear gradient
Initial Tags 
CSS3
Initial Language 
CSS