#1 minimalist CSS colorswatch

minimalist CSS responsive colorswatch

by toubia95

HTML

<div id="c01"></div>
<!-- CSS-GRADIENTS : responsive, but CSS3 and difficult to add a new color block -->

<div id="c02"></div>
<!-- CSS-SHADOWS : not responsive & CSS3 -->

<ul id="c03"><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li></ul>
<!-- UL : responsive & CSS2, but difficult to add a new color block -->

<table id="c04"><tr><td></td><td></td><td></td><td></td><td></td></tr></table>
<!-- TABLE : responsive, small markup, CSS2 & easy to add a new color block -->

<svg id="c05" width="100%" height="55">
  <rect x="0" y="0" width="20%" height="50"/>
  <rect x="20%" y="0" width="20%" height="50"/>
  <rect x="40%" y="0" width="20%" height="50"/>
  <rect x="60%" y="0" width="20%" height="50"/>
  <rect x="80%" y="0" width="20%" height="50"/>
</svg>
<!-- SVG : responsive but inline markup -->

<svg id="c06"  width="100%" height="50">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:magenta;" />
      <stop offset="20%" style="stop-color:magenta;" />
      <stop offset="20%" style="stop-color:purple;" />
      <stop offset="40%" style="stop-color:purple;" />
      <stop offset="40%" style="stop-color:blue;" />
      <stop offset="60%" style="stop-color:blue;" />
      <stop offset="60%" style="stop-color:green;" />
      <stop offset="80%" style="stop-color:green;" />
      <stop offset="80%" style="stop-color:orange;" />
      <stop offset="100%" style="stop-color:orange;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="50" fill="url(#grad1)"/>
</svg>
<!-- SVG-GRADIENT : responsive, but too much markup -->

<canvas id="c07" width="500px" height="50px"></canvas>
<!-- CANVAS : responsive (strange behaviour at junctions), but HTML5 tag and JS -->

CSS

div {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}

#c01 { /* linear-gradient */
    background-image: linear-gradient(to right, 
        magenta 0%, magenta 20%, 
        purple 20%, purple 40%, 
        blue 40%, blue 60%,
        green 60%, green 80%, 
        orange 80%, orange 100%
        );
}

#c02 { /* box-shadow */
  transform:translate(-100%, 0);
  box-shadow:magenta 5em 0 0, purple 10em 0 0, blue 15em 0 0, green 20em 0 0, orange 25em 0 0;
}

#c03 {
    margin:0;
    padding:0;
    width: 100%;
}

#c03 li {
    background-color:magenta;
    display:inline;
    float: left;
    height: 50px;
    width: 20%;
    margin-bottom: 10px;
}

#c03 li+li {background-color:purple;}
#c03 li+li+li {background-color:blue;}
#c03 li+li+li+li {background-color:green;}
#c03 li+li+li+li+li {background-color:orange;}

#c04 {
    width: 100%;
    height: 50px;
    border-collapse: collapse;
    margin-bottom: 10px;
}

#c04 td {background-color:magenta;}
#c04 td+td {background-color:purple;}
#c04 td+td+td {background-color:blue;}
#c04 td+td+td+td {background-color:green;}
#c04 td+td+td+td+td {background-color:orange;}

#c05 {
    width: 100%;
}

#c05 rect {fill:magenta;}
#c05 rect+rect {fill:purple;}
#c05 rect+rect+rect {fill:blue;}
#c05 rect+rect+rect+rect {fill:green;}
#c05 rect+rect+rect+rect+rect {fill:orange;}

#c06, #c07 {
    width: 100%;
    height: 50px;
    background: silver;
    margin-bottom: 10px;
}

JavaScript

var canvas = document.getElementById('c07');
var context = canvas.getContext('2d');


function drawSquare(context,color,position) {
context.beginPath();
context.rect(position, 0, 100, 50);
context.fillStyle = color;
context.fill();
}

drawSquare(context,"magenta",0);
drawSquare(context,"purple",100);
drawSquare(context,"blue",200);
drawSquare(context,"green",300);
drawSquare(context,"orange",400);