Skip to content

Instantly share code, notes, and snippets.

@Daniel15 Daniel15/gradient.js
Created May 12, 2014

Embed
What would you like to do?
CSS gradient animation using Prototype
(function() {
var setLinearGradient;
// Figure out what prefix the current browser uses for gradients
var tempEl = new Element('div');
tempEl.style.cssText =
'background-image: -moz-linear-gradient(top, red 0%, white 100%); \
background-image: -webkit-linear-gradient(top, red 0%, white 100%); \
background-image: -o-linear-gradient(top, red 0%, white 100%); \
background-image: -ms-linear-gradient(top, red 0%, white 100%); \
background-image: linear-gradient(top, red 0%, white 100%);';
var bgCss = tempEl.style.backgroundImage;
// CSS gradients no supported? setGradient is a no-op.
if (!bgCss || bgCss.indexOf('linear-') == -1) {
Element.supportsLinearGradient = false;
setLinearGradient = function () {};
} else {
Element.supportsLinearGradient = true;
// Find the prefix
var prefix = bgCss.substring(0, bgCss.indexOf('linear-'));
setLinearGradient = function (element, gradients) {
var element = $(element),
gradients = gradients.split(';'),
gradientsCss = [];
if (!element)
return;
gradients.each(function (gradient) {
gradientsCss.push(prefix + 'linear-gradient(' + gradient.trim() + ')');
});
element.style.backgroundImage = gradientsCss.join(', ');
return element;
};
}
Element.addMethods({ setLinearGradient: setLinearGradient });
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.