Skip to content

Instantly share code, notes, and snippets.

@herrernst

herrernst/grayramp.html

Last active October 6, 2016 19:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save herrernst/1a66146d154ac4461fc39797e941b1b0 to your computer and use it in GitHub Desktop.
Save herrernst/1a66146d154ac4461fc39797e941b1b0 to your computer and use it in GitHub Desktop.
Download ZIP
draw grayscale ramp with html/css
Raw
grayramp.html
<!doctype html>
<title>draw grayscale ramp</title>
<meta name="viewport" content="width=device-width">
<style>
.ramp {
height: 300px;
position: relative;
}
.ramp > div {
position: absolute;
height: 100%;
}
</style>
<body>
<label for="widthRGB">rgb: width of one jump</label><input id="widthRGB" value="3" />
<button id="drawRGB">draw</button>
<br>
<label for="widthAlpha">alpha: number of jumps</label><input id="widthAlpha" value="768" />
<label for="widthAlpha">alpha: gamma (srgb ca. 2.2)</label><input id="gammaAlpha" value="2.2" />
<button id="drawAlpha">draw</button>
<br>
<label for="widthCss">css gradient: number of jumps</label><input id="widthCss" value="768" />
<button id="drawCss">draw</button>
<div class="ramp"></div>
<h2>comparison (png)</h2>
<img src="https://www.drycreekphoto.com/images/calibration/graygradient.png">
<script>
const sRGBLikeGamma = 2.2;
function drawRampRGB(w, el) {
for(var i=0; i<256; i++) {
var r = document.createElement("div");
r.style.width = w + "px";
r.style.left = (255-i)*w + "px";
r.style.backgroundColor = "rgb(" + i + ", " + i + ", " + i + ")";
el.appendChild(r);
}
}
function drawRampAlpha(c, el, gamma) {
for(var i=0; i<c; i++) {
var r = document.createElement("div");
r.style.width = "1px";
r.style.left = i + "px";
r.style.backgroundColor = "rgba(0, 0, 0, " + Math.pow(i/c, sRGBLikeGamma/gamma) + ")";
el.appendChild(r);
}
}
function drawRampCssGradient(w, el) {
var r = document.createElement("div");
r.style.width = w + "px";
r.style.backgroundImage = "linear-gradient(to right, rgba(0, 0, 0, 0), black)";
el.appendChild(r);
}
var ramp = document.querySelector(".ramp");
document.querySelector("#drawRGB").addEventListener("click", function () {
ramp.innerHTML = "";
drawRampRGB(parseInt(document.querySelector("#widthRGB").value, 10), ramp);
});
document.querySelector("#drawAlpha").addEventListener("click", function () {
ramp.innerHTML = "";
var gamma = parseFloat(document.querySelector("#gammaAlpha").value, 10)
drawRampAlpha(parseInt(document.querySelector("#widthAlpha").value, 10), ramp, gamma);
});
document.querySelector("#drawCss").addEventListener("click", function () {
ramp.innerHTML = "";
drawRampCssGradient(parseInt(document.querySelector("#widthCss").value, 10), ramp);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment