Alternative Interpolation Methods (experiment)

Alternative-Interpolation-Methods-(experiment).markdown

Alternative Interpolation Methods (experiment)

An experiment of alternative interpolation methods for CSS gradients, using Chroma.js

A Pen by Lucas Bebber on CodePen.

License.

index.html

<h1>Alternative Interpolation Methods</h1>
<h2>Using <a href="https://github.com/gka/chroma.js">Chroma.js</a></h2>
<div class="container">
   <div class="rect">RGB (regular)</div>
  <div class="rect lab">LAB</div>
<div class="rect lch">HCL</div>
  <div class="rect hsv">HSV</div>
  <div class="rect hsl">HSL</div>

  <div class="rect bg-sky1">RGB (regular)</div>
  <div class="rect bg-sky1 lab">LAB</div>  
  <div class="rect bg-sky1 lch">HCL</div>
  <div class="rect bg-sky1 hsv">HSV</div>
  <div class="rect bg-sky1 hsl">HSL</div>
  
  <div class="rect bg-sky2">RGB (regular)</div>
  <div class="rect bg-sky2 lab">LAB</div>
  <div class="rect bg-sky2 lch">HCL</div>
  <div class="rect bg-sky2 hsv">HSV</div>
  <div class="rect bg-sky2 hsl">HSL</div>
  
  <div class="rect bg-sky3">RGB (regular)</div>
  <div class="rect bg-sky3 lab">LAB</div>
  <div class="rect bg-sky3 lch">HCL</div>
  <div class="rect bg-sky3 hsv">HSV</div>
  <div class="rect bg-sky3 hsl">HSL</div>
  
  <div class="rect bg-fuic1">RGB (regular)</div>
  <div class="rect bg-fuic1 lab">LAB</div>
  <div class="rect bg-fuic1 lch">HCL</div>
  <div class="rect bg-fuic1 hsv">HSV</div>
  <div class="rect bg-fuic1 hsl">HSL</div>
  
  <div class="rect bg-fuic2">RGB (regular)</div>
  <div class="rect bg-fuic2 lab">LAB</div>
  <div class="rect bg-fuic2 lch">HCL</div>
  <div class="rect bg-fuic2 hsv">HSV</div>
  <div class="rect bg-fuic2 hsl">HSL</div>
  
  <div class="rect bg-fuic3">RGB (regular)</div>
  <div class="rect bg-fuic3 lab">LAB</div>
  <div class="rect bg-fuic3 lch">HCL</div>
  <div class="rect bg-fuic3 hsv">HSV</div>
  <div class="rect bg-fuic3 hsl">HSL</div>
  
  <div class="rect hard1">RGB (regular)</div>
  <div class="rect hard1 lab">LAB</div>
  <div class="rect hard1 lch">HCL</div>
  <div class="rect hard1 hsv">HSV</div>
  <div class="rect hard1 hsl">HSL</div>

  <div class="rect hard2">RGB (regular)</div>
  <div class="rect hard2 lab">LAB</div>
  <div class="rect hard2 lch">HCL</div>
  <div class="rect hard2 hsv">HSV</div>
  <div class="rect hard2 hsl">HSL</div>

  <div class="rect hard3">RGB (regular)</div>
  <div class="rect hard3 lab">LAB</div>
  <div class="rect hard3 lch">HCL</div>
  <div class="rect hard3 hsv">HSV</div>
  <div class="rect hard3 hsl">HSL</div>
  
  <div class="rect hard4">RGB (regular)</div>
  <div class="rect hard4 lab">LAB</div>
  <div class="rect hard4 lch">HCL</div>
  <div class="rect hard4 hsv">HSV</div>
  <div class="rect hard4 hsl">HSL</div>
  
  <div class="rect hard5">RGB (regular)</div>
  <div class="rect hard5 lab">LAB</div>
  <div class="rect hard5 lch">HCL</div>
  <div class="rect hard5 hsv">HSV</div>
  <div class="rect hard5 hsl">HSL</div>
</div>

script.js

(function($){   

    if ( !$.cssHooks ){
        //if not, output an error message
        alert("jQuery 1.4.3 or above is required for this plugin to work");
        return;
    }
    div = document.createElement( "div" ),
    css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";    
    div.style.cssText = css;


    $.support.linearGradient =
    div.style.backgroundImage.indexOf( "-moz-linear-gradient" )  > -1 ? '-moz-linear-gradient' :
    (div.style.backgroundImage.indexOf( "-webkit-gradient" )  > -1 ? '-webkit-gradient' :
    (div.style.backgroundImage.indexOf( "linear-gradient" )  > -1 ? 'linear-gradient' : false));
    if ( $.support.linearGradient)
    {
      $.cssHooks['linearGradientColors'] = { 
        get: function(elem){
          var currentStyle=$.css(elem, 'backgroundImage'),gradient,colors=[];
          gradient=currentStyle.match(/gradient(\(.*\))/g);
          if(gradient.length)
          {
            gradient=gradient[0].replace(/(linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'');
            colors= jQuery.grep(gradient.match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return jQuery.trim( s )!=''})
          }
          return colors;
        }
    };
 }
})(jQuery);

$(document).ready(function(){
  $(".lch,.lab,.hsv,.hsl").each(function(){
    var colors=$(this).css("linearGradientColors");
    
    var mode=$(this).hasClass("lch")?"lch":$(this).hasClass("lab")?"lab":$(this).hasClass("hsv")?"hsv":"hsl"
    var scale=chroma.scale(colors).mode(mode);


    var steps=20;
    var gradient=[];
    for(var i=0;i<steps;i++){
      var color=scale(i/(steps-1)).hex();
      gradient.push(color);
    }
    
    $(this).css({
      background:"linear-gradient("+gradient.join()+")"
    })
    
    steps=6;
    for(var i=0;i<steps;i++){
      var color=scale(i/(steps-1)).hex();
      gradient.push(color);
      var step=$("<div/>").addClass("step");
      step.css({
        background:color,
        width:(100/steps)+"%",
        left:((100/steps)*i)+"%",
      });
      $(this).append(step);
    }
  })
})

style.scss

@import "compass/css3";
//Play around /////////////////////////////
//change the colors of the first row here//
$gradient:linear-gradient(#21313E,#EFEE69);
///////////////////////////////////////////

body{
  font-size:0;
  color:#333;
}
h1{
  font-size:25px;
  text-align:center;
  font-weight:normal;
  margin:0;
  margin-top:10px;
  line-height:1.4em;
}
h2{
  font-size:18px;
  text-align:center;
  margin:0;
  margin-bottom:10px;
  font-weight:normal;
  line-height:1.4em;
}
.container{
  width:960px;
  margin:0 auto;
}
.rect{
  font-size:15px;
  width:20%;
  height:200px;
  line-height:200px; 
  text-align:center;
  font-weight:bold;
  color:white;
  $border:rgba(0,0,0,0.4);
  text-shadow:1px 1px $border,-1px -1px $border,1px -1px $border,-1px 1px $border;
  background:$gradient;
  display:inline-block;
  margin-bottom:10px;
  position:relative;
}
.step{
  position:absolute;
  height:30px;
  bottom:0;
  border:3px solid white;
  border-bottom:none;
  border-right:none;
  box-sizing:border-box;
  visibility:hidden;
}
.step:last-child{
  border-right:3px solid white;
}
.rect:hover .step{
  visibility:inherit;
}
.bg-sky1{
  background:linear-gradient(#575853,#e38635);
}
.bg-sky2{
  //#efddd5,#efb0af,#918daf
  background:linear-gradient(#efddd5,#918daf);
}
.bg-sky3{
  background:linear-gradient(#7092b9,#e19e76);
}
.bg-fuic1{
  background:linear-gradient(#e74c3c,#3498db);
}
.bg-fuic2{
  background:linear-gradient(#e74c3c,#1abc9c);
}
.bg-fuic3{
  background:linear-gradient(#e67e22,#3498db);
}
.hard1{
  background:linear-gradient(red,black);
}
.hard2{
  background:linear-gradient(red,blue);
}
.hard3{
  background:linear-gradient(blue,green);
}
.hard4{
  background:linear-gradient(#00ffff,#0000ff);
}

.hard5{
  background:linear-gradient(black,white);
}