Skip to content

Instantly share code, notes, and snippets.

@krusynth
Created June 21, 2012 13:07
Show Gist options
  • Save krusynth/2965642 to your computer and use it in GitHub Desktop.
Save krusynth/2965642 to your computer and use it in GitHub Desktop.
Better Gradient for LESS CSS
/*
Better Gradient
Better gradient LESS CSS mixin. Lets you start and
stop gradients at arbitrary distances, rather than 100%.
This expands on what is done by lesselements
(which is an awesome package!)
http://lesselements.com
Usage:
.my-box-with-gradient {
.better_gradient(#FFFFFF, #999999, #FFFFFF, 4px);
}
NOTE this works top-bottom, unlike gradient()
Are you STILL not using LESS CSS?
http://lesscss.org/
(Yes, I know there's SASS. It's on the TODO list.)
*/
.better_gradient(@bgcolor: #F5F5F5, @start: #EEE, @stop: #FFF, @end: 100%) {
background: @bgcolor;
background: -moz-linear-gradient(top, @start 0%, @stop @end); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@end,@stop)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, @start 0%,@stop @end); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, @start 0%,@stop @end); /* Opera 11.10+ */
background: -ms-linear-gradient(top, @start 0%,@stop @end); /* IE10+ */
background: linear-gradient(top, @start 0%,@stop @end); /* W3C */
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start}', endColorstr='@{stop}',GradientType=0 )"; /* IE6-9 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment