I have some DIVs that can be any of 5 colours depending on which classes the DIV has set. If it has more than one class set, there's a priority to determine which colour is used. I want to change this, so that we get multiple colours if multiple classes are set.
Now, one part of this is the UI/UX perspective, because stripes can be horrible to look at. If you have any recommendations, I'm all ears -- but that alone won't earn you an acceptance.
The other part is how to pull this off technically. I'd prefer to do this purely in CSS, and I'd prefer the solution to work on the DIV background colour, but exactly how is still open. It's possible to create two-color stripes, and it's possible to create multi-coloured backgrounds, but it's not clear to me how to do this in a dynamic fashion as opposed to the hard-coded examples, and have the ...dynamismityness?... triggered via element classes.
I imagine you could use http://www.colorzilla.com/gradient-editor/ to obtain something like:
.one{
background:#ff0000;
}
.one.two{
background: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(0,255,0,1) 50%, rgba(0,255,0,1) 50%, rgba(0,255,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9*/
}
.one.two.three{
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 33%, rgba(0,255,0,1) 33%, rgba(0,255,0,1) 33%, rgba(0,255,0,1) 66%, rgba(0,0,255,1) 66%, rgba(0,0,255,1) 66%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 66%,rgba(0,0,255,1) 66%,rgba(0,0,255,1) 66%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 66%,rgba(0,0,255,1) 66%,rgba(0,0,255,1) 66%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 */
}