CODEWITHSUNDEEP
csstwitter-bootstraplinear-gradients
user3733831
user3733831

Reputation: 2926

Bootstrap gradient with 4 colors

I have used 4 colors to create css gradient its like this. 

background: linear-gradient(to right, #ffffff 0%,#ffffff 72%,#929292 72%,#929292 100%);

Here I am using bootstrap. my problem is how I call this kind of gradient in my less file?

If it has 2 or 3 colors in gradients it is okay for me. Then I can use bootstrap mixin funciton like this..

#gradient.vertical(#ffffff; #f9f9f9 );
#gradient.vertical-three-colors(#ffffff; #f9f9f9; 72%; #e7eaef);

but I am not sure how to use it with over 3 colors..

hope someone may help me out.

Thank you.

Upvotes: 3

Views: 2410

Answers (1)

Pete TNT
Pete TNT

Reputation: 8403

Just make your own four way gradient mixin and add it to bootstrap/less/mixins/grandients.less

Such as:

  .horizontal-four-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 33%; @mid-color-2: #abcdef; @color-stop-2: 66%; @end-color: #c3325f) {
    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color);
    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2,@end-color);
    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  }

and call it with

#gradient.horizontal-four-colors(#ffffff; #f9f9f9; 33%; #bbb, 66%, #e7eaef);

Upvotes: 2

Related Questions