Skip to content

Instantly share code, notes, and snippets.

View catjia1011's full-sized avatar

Cat Jia catjia1011

  • Singapore
View GitHub Profile
// Vertical gradient using CSS where possible, and base64-encoded SVG for IE9 (enables use of this in combination with border-radius)
// Based on this by Phil Brown: http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/
// Also based on a mixin from Twitter Bootstrap: https://github.com/twitter/bootstrap
.gradient-vertical(@startColor, @endColor) {
// IE9 prep
@dataPrefix: ~"url(data:image/svg+xml;base64,";
@dataSuffix: ~")";
@dataContent: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g743" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop stop-color="@{startColor}" offset="0"/><stop stop-color="@{endColor}" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g743)"/></svg>';