JavaScript apply CSS3 gradient

Question

I am trying to apply a CSS3 gradient using JavaScript. I have an array of random colours and I select one of these colours and then apply it to a gradient. The problem is, that because the CSS3 background property doesn't have vendor prefixes, I can't seem to set them all. An example in CSS is this:

background: #3C60EF; /* Old browsers */
background: -webkit-linear-gradient(left top, #3C60EF, #133de5); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #3C60EF, #133de5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #3C60EF, #133de5); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #3C60EF, #133de5); /* Standard syntax (must be last) */

So, as you can see, I can't apply all them to the element. I need to either figure out what browser I am using or find a way of adding all these.

Any help would be appreciated.

Tony Gustafsson · Accepted Answer · 2015-03-17 11:37:35Z

1

Add them all to a class, and add the class to the element with JavaScript instead.

jQuery:

$('#my-element').addClass('mygradient');

Vanilla:

document.getElementById('my-element').className = 'mygradient';

answered Mar 17, 2015 at 11:37

Tony Gustafsson

9281 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

r3plica Over a year ago

that would be find, except that the colour is random :(

Tony Gustafsson Over a year ago

Random you say... hm... I guess you could add the class as inline CSS (style element). You can also set these prefixes with JavaScript if you want to... -webkit-linear-gradient becomes webkitLinearGradient I think.

Quentin Over a year ago

Those statements aren't equivalent. The non-jQuery version would be document.getElementById('my-element').classList.add('mygradient').

Tony Gustafsson Over a year ago

Quentin, classList is nicer, but the browser support may not be good enough. It's more like addClass() though, correct.

user2375017 · Accepted Answer · 2015-03-17 11:45:10Z

1

You can create a new stylesheet dynamically. Append the link to the new stylesheet to the document head - $("head").append("<style id='dynamicStylesheet'></style>");

Then set the content of the stylesheet (create your gradient with your random colour) like this.

     var newGradientClassText = ".newGradientClass { "+
"background: #3C60EF; /* Old browsers */ " +
        "background: -webkit-linear-gradient(left top, " + randomColor + ", " + SecondrandomColor + "); /* For Safari 5.1 to 6.0 */ " + 
       " background: -o-linear-gradient(bottom right, " + randomColor + "," + SecondrandomColor + "); /* For Opera 11.1 to 12.0 */ " +
        "background: -moz-linear-gradient(bottom right, " + randomColor + ", " + SecondrandomColor + "); /* For Firefox 3.6 to 15 */ " +
       " background: linear-gradient(to bottom right, " + randomColor + ", " + SecondrandomColor + "); /* Standard syntax (must be last) */" +
"}";

Then set the text of the stylsheet $("#dynamicStylesheet").text(newGradientClassText);

Then you can apply the class to the element $('#exampleElement').addClass(newGradientClass);

answered Mar 17, 2015 at 11:45

user2375017

2 Comments

r3plica Over a year ago

would this be ok to use with 100+ elements?

user2375017 Over a year ago

if you want all elements to have same gradient at once you could just give all elements a common base class, and use $('.ElementCommonClass').addClass(newGradientClass);

r3plica · Accepted Answer · 2015-03-17 13:09:29Z

I was implementing @tinkerbot 's solution but then I found another way. I created a class like this:

var self = this;

var _baseColour = '#3C60EF';

var _shadeColour = function (hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    lum = lum || 0;

    // convert to decimal and change luminosity
    var rgb = "#", c, i;
    for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }

    return rgb;
};

function _getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
};

function _getRandomColour(colour) {
    var percent = _getRandomInt(-100, 100) / 100;

    colour = colour || _baseColour;

    return _shadeColour(colour, percent);
};

self.generateCSS = function (colour) {
    var colour1 = _getRandomColour(colour),
        colour2 = _shadeColour(colour1, -.1); // Shade 10% darker

    var rule = 'background: ' + colour1 + '; /* Old browsers */ ' +
                'background: -webkit-linear-gradient(left top, ' + colour1 + ', ' + colour2 + '); /* For Safari 5.1 to 6.0 */' +
                'background: -o-linear-gradient(bottom right, ' + colour1 + ', ' + colour2 + '); /* For Opera 11.1 to 12.0 */' +
                'background: -moz-linear-gradient(bottom right, ' + colour1 + ', ' + colour2 + '); /* For Firefox 3.6 to 15 */' +
                'background: linear-gradient(to bottom right, ' + colour1 + ' , ' + colour2 + '); /* Standard syntax (must be last) */';

    return rule;
};

and in my loop through the elements I just did this:

var colour = attr.colouredTile;
var css = controller.generateCSS(colour);

element.setAttribute('style', css);

Collectives™ on Stack Overflow

JavaScript apply CSS3 gradient

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related