Skip to content

Instantly share code, notes, and snippets.

@stevenharman
Created March 24, 2011 21:59
Show Gist options
  • Save stevenharman/885994 to your computer and use it in GitHub Desktop.
Save stevenharman/885994 to your computer and use it in GitHub Desktop.
a gradient mix-in for LESS (tested with dotLESS, but may work with LESS.js)
.gradient(@from:#fff, @to:#fff, @fallback:@from) {
/* https://github.com/jamesfoster/dotless/commit/4004eff3cab321e31f43d052e35b5538f19443f7 */
@ffgradient: "-moz-linear-gradient(top, {0}, {1}) no-repeat scroll 0 0 transparent";
@wkgradient: "-webkit-gradient(linear,left top,left bottom,color-stop(0, {0}),color-stop(1, {1})) no-repeat scroll 0 0 transparent";
@iegradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='{0}', endColorstr='{1}')";
@ie8gradient: "\"progid:DXImageTransform.Microsoft.gradient(startColorstr='{0}', endColorstr='{1}')\"";
background: @fallback; /* for non-css3 browsers */
background: formatstring(@ffgradient, @from, @to); /* FF3.6+ */
background: formatstring(@wkgradient, @from, @to); /* Saf4+, Chrome */
filter: formatstring(@iegradient, @from, @to); /* IE6,IE7 */
-ms-filter: formatstring(@ie8gradient, @from, @to); /* IE8 */
}
/* usage */
.some-selector {
.gradient(#454545, #000, #454545);
}
@tomasdev
Copy link

What about support for multi-stop gradients ? like
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

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