Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save simbo/9448334 to your computer and use it in GitHub Desktop.
Save simbo/9448334 to your computer and use it in GitHub Desktop.
/* =============================================================================
Gradients with unlimited color-stops
========================================================================== */
#gradient {
// Filter color-stop params
.color-stops(@color-stops-N...) {
@color-stops: ~`"@{arguments}".replace(/(^\[)|(\]$)/g,'')`;
@color-stops-webkit: ~`(function(c){
for(var i=0; i<c.length; i++) {
c[i] = c[i].trim().split(/\s+/);
if(c[i].length==1)
c[i].push(i==0?"0%":"100%");
c[i] = "color-stop("+c[i].reverse().join(',')+")";
}
return c.join(",");
})("@{color-stops}".split(','))`;
}
// Creepy IE special treatment, fallback on first and last color-stop
.ie-filter(@color-stops; @type) {
filter: ~`(function(c,t){
var a = c[0].split(/\s+/)[0].trim(),
b = c.slice(-1)[0].trim().split(/\s+/)[0].trim();
return "progid:DXImageTransform.Microsoft.gradient(startColorstr='"+a+"', endColorstr='"+b+"', GradientType="+t+")";
})("@{color-stops}".split(','),@{type})`;
}
// Horizontal gradient, from left to right
.horizontal(@color-stops-0: #555 0%, @color-stops-1: #333 100%, @color-stops-N...) {
.color-stops(@arguments);
background-image: -webkit-gradient(linear, left top, right top, @color-stops-webkit); // Chrome, Safari 4+
background-image: -webkit-linear-gradient(left, @color-stops); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(left, @color-stops); // Opera 12
background-image: linear-gradient(to right, @color-stops); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
#gradient > .ie-filter(@color-stops; 1); // IE9 and down, gets no color-stop at all for proper fallback
}
// Vertical gradient, from top to bottom
.vertical(@color-stops-0: #555 0%, @color-stops-1: #333 100%, @color-stops-N...) {
.color-stops(@arguments);
background-image: -webkit-gradient(linear, left top, left bottom, @color-stops-webkit); // Chrome, Safari 4+
background-image: -webkit-linear-gradient(top, @color-stops); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, @color-stops); // Opera 12
background-image: linear-gradient(to bottom, @color-stops); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
#gradient > .ie-filter(@color-stops; 0); // IE9 and down, gets no color-stop at all for proper fallback
}
.directional(@deg: 45deg, @color-stops-0: #555 0%, @color-stops-1: #333 100%, @color-stops-N...) {
.color-stops(@arguments);
background-image: -webkit-linear-gradient(@deg, @color-stops); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(@deg, @color-stops); // Opera 12
background-image: linear-gradient(@deg, @color-stops); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
}
.radial(@color-stops-0: #555 0%, @color-stops-1: #333 100%, @color-stops-N...) {
.color-stops(@arguments);
background-image: -webkit-gradient(radial, center center, 0%, center center, 100%, @color-stops-webkit); // Chrome, Safari 4+
background-image: -webkit-radial-gradient(circle, @color-stops); // Safari 5.1-6, Chrome 10+
background-image: -o-radial-gradient(circle, @color-stops); // Opera 12+
background-image: radial-gradient(circle, @color-stops); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: no-repeat;
}
.striped(@angle: 45deg; @color: rgba(255,255,255,.15)) {
#gradient > .directional(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-repeat: repeat;
}
}
@danigonza
Copy link

There is a mistake an the directional method. Instead of @arguments you need to pass the colors only. If not the result will have 2 times the degrees.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment