What is the correct/fastest way to do this?

[Remeste]

I’m currently using a lot of gradients (the same ones multiple times). I’m trying to work out the correct/fastest way to implement them.

For arguments sake, i could add the style to every class individually:

#something {

Insert random properties

background: -webkit-gradient(linear, top, bottom, color-stop(0%, #a03eb3), color-stop(100%, #701a8b));

background: -webkit-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:    -moz-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:     -ms-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:      -o-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:         linear-gradient(top, #a03eb3 0%, #701a8b 100%);

}



#another-something {

Insert random properties

background: -webkit-gradient(linear, top, bottom, color-stop(0%, #a03eb3), color-stop(100%, #701a8b));

background: -webkit-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:    -moz-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:     -ms-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:      -o-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:         linear-gradient(top, #a03eb3 0%, #701a8b 100%);

}

This seems to be the wrong way to go about it.

The second option is to add the class in manually to the html, for example:

.gradient {

background: -webkit-gradient(linear, top, bottom, color-stop(0%, #a03eb3), color-stop(100%, #701a8b));

background: -webkit-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:    -moz-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:     -ms-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:      -o-linear-gradient(top, #a03eb3 0%, #701a8b 100%);

background:         linear-gradient(top, #a03eb3 0%, #701a8b 100%);

}

The third option (that i can think of), is using Jquery to add the classes to the given elements:

$('#button, #sidebar').addClass('gradient');

I guess my question is, is the 2nd or 3rd option the best? Or is there another option?

Thanks.

[joshuanhibbert]

@stevencrader has hit the nail on the head, I would be using his method.

[Remeste]

Duh, never thought of that that method.

That seems like the best way. Thanks.

[Author]

Posts