Dotted background generator
HTML
<div class="container">
<div class="row">
<h1 class="text-center">Dotted background generator</h1>
<input id="dot-color" type="color" class="form-control">
<label for="opacity">Opacity <input value="0.1" id="opacity-val" readonly class="form-control">
<input id="opacity" value="0.1" type="range" min="0" max="1" step="0.01" class="form-control">
</label>
<label for="angle">Angle <input value="-90" id="angle-val" readonly class="form-control">
<input id="angle" value="-90" type="range" min="-180" max="180" step="1">
</label>
<label for="dot-size">Dot size <input value="0.2" readonly id="dot-size-val" class="form-control">
<input id="dot-size" value="0.2" type="range" min="0.2" max="1" step="0.1">
</label>
<br/>
<textarea id="code" class="form-control" readonly ></textarea>
<br/>
<button id="generate-bg" class="btn btn-success">Generate</button>
</div>
</div>
CSS
body{
background-image: -webkit-linear-gradient(-90deg, transparent 0%, transparent 50%, white 50%, white 100%),
-webkit-linear-gradient( 0deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.1) 50%, white 50%, white 100%);
background-size:.25em .25em;
}
#code{
height: 120px;
resize: none;
}
JAVASCRIPT
$("#generate-bg").on("click", function(){
generateCss();
});
$("#dot-color, #opacity, #angle, #dot-size").on("change", function(){
generateCss();
});
function hexToRGB(color,opacity){
var rgba = color.match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) }).join(",");
return "rgba("+rgba+','+opacity+")";
}
function generateCss(){
var color = $("#dot-color").val();
var opacity = $("#opacity").val();
var angle = $("#angle").val();
var dotSize = $("#dot-size").val();
var dotColor = hexToRGB(color,opacity);
$("#opacity-val").val(opacity);
$("#angle-val").val(angle);
$("#dot-size-val").val(dotSize);
var code = "background-image: -webkit-linear-gradient("+angle+"deg,transparent 0%,transparent 50%, white 50%, white 100%),\n -webkit-linear-gradient( 0deg, "+dotColor+" 0%, "+dotColor+" 50%, white 50%, white 100%);\n background-size:"+dotSize+"em "+dotSize+"em;";
$("#code").val(code);
$("body").attr("style",code);
}
1 Response