CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to set gradient color for a tab?

I have to set the gradient color of a specific tab.It contains a gradient color from first tab to last tab.How can I set this. For that I used the below code

  $(function() {
    $( "#tabs" ).tabs();

      $('.gradient_me').each( function(index) {
          var color = 255-index*75;
          $(this).css('background', 'rgb('+color+', 0, 0)');
      });
  });

But the problem is one tab contains only one color.I want gradient color from first to last tab.How can I do this?

Upvotes: 1

Views: 1176

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

Easy!

All you need is a linear gradient CSS rule. 

  $(function() {
    $( "#tabs" ).tabs();

      $('.gradient_me').each( function(index) {
          var color = 'rgb(' + (255-index*75) + ', 0, 0)';
          var color2 = 'rgb(' + (255-index*75 - 75) + ', 0, 0)';
          $(this).css('background', '-moz-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', '-webkit-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', '-ms-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', '-o-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', 'linear-gradient(left, '+color+', ' + color2 +')');

      });
  });

Demo: http://jsfiddle.net/5zfyU/8/

Upvotes: 2

Related Questions