Spoiler with Pure CSS

by denvdmj

HTML

<h1>Color Picker</h1>
<a href="https://stackoverflow.com/questions/8729040/create-a-color-picker-similar-to-photoshops-using-javascript-and-html-canvas">Create a Color Picker,
similar to Photoshop's, using Javascript and HTML Canvas</a>

<p>I am not at all versed in Computer Graphics and am in need of creating a color picker as a javascript tool to embed in an HTML page.</p>
<p>First, and looking at Photoshop's one, i thought of the RGB palette as a three-dimensional matrix. My first attempt envolved:</p>

<input type="checkbox" id="spoiler-1" />
<label for="spoiler-1"
  text-show="Show code"
  text-hide="Hide code"
></label>
<script spoiler>
document.addEventListener('DOMContentLoaded', function (event) {
  var rgCanvas = document.createElement('canvas');
  rgCanvas.width = 256;
  rgCanvas.height = 256;
  rgCanvas.style.border = '3px solid black';
  for (g = 0; g < 256; g++) {
    for (r = 0; r < 256; r++) {
      var context = rgCanvas.getContext('2d');
      context.beginPath();
      context.moveTo(r,g);
      context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
      context.lineTo(r+1,g+1);
      context.stroke();
      context.closePath();
    }
  }

  var bCanvas = document.createElement('canvas');
  bCanvas.width = 20;
  bCanvas.height = 256;
  bCanvas.style.border = '3px solid black';
  for (b = 0; b < 256; b++) {
    var context = bCanvas.getContext('2d');
    context.beginPath();
    context.moveTo(0,b);
    context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
    context.lineTo(20, b);
    context.stroke();
    context.closePath();
  }

  var el = document.querySelector('color-picker');
  el.appendChild(rgCanvas);
  el.appendChild(bCanvas);

});

</script>

<p>this results in something like:</p>

<color-picker></color-picker>

<p>My thought is this is too linear, comparing to the ones i see in Photoshop and on the web. I would like to know the logic behind the color mapping in a picker like this:</p>

<figure><img...

CSS

body {
  font: 15px/1.4 Arial, sans-serif;
  padding: 1em 2em;
  max-width: 48em;
  min-width: 28em;
  margin: auto;  
  background: #fff;
  color: #000;
}
color-picker {
  display: block;
  margin: 1em 0;
}
color-picker > canvas {
  margin-right: 5px;
}
script {
  white-space: pre;
  font-family: PragmataPro, Consolas, monospace;
  background: #eee;
  border-radius: .4em;
  padding: 1em 0 1em 2em;
}


input[id^="spoiler-"] {
  display: none;
}

input[id^="spoiler-"] + label:before {
  content: attr(text-pre) attr(text-show) attr(text-post);
  cursor: pointer;
  color: #009;
}
input[id^="spoiler-"]:checked + label:before {
  content: attr(text-pre) attr(text-hide) attr(text-post);
  color: #900;
}

[spoiler] {
  display: none;
}
input[id^="spoiler-"]:checked + label + [spoiler] {
  display: block;
}

input[id^="spoiler-"] + label:hover:before {
 text-decoration: underline;
}