Skip to content

Instantly share code, notes, and snippets.

@herrernst

herrernst/grayramp.html

Last active October 6, 2016 19:29
Show Gist options
  • 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>
<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="1" />
<button id="drawRGB">draw</button>
<label for="widthAlpha">alpha: number of jumps</label><input id="widthAlpha" value="1024" />
<button id="drawAlpha">draw</button>
<div class="ramp"></div>
<script>
function drawRampRGB(w, el) {
for(var i=0; i<1024; i++) {
var r = document.createElement("div");
r.style.width = w + "px";
r.style.left = i*w + "px";
r.style.backgroundColor = "rgb(" + i + ", " + i + ", " + i + ")";
el.appendChild(r);
}
}
function drawRampAlpha(c, el) {
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, " + (i/c) + ")";
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 = "";
drawRampAlpha(parseInt(document.querySelector("#widthAlpha").value, 10), ramp);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment