Gradient generator 2

HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Gradient generator 2</title> </head> <body> <div id="examp"> <pre> [34]RGB i [1]Gradi [180]Degrees [ ]random [x]fixed [ ]reversed [ ]radial [x]linea [x]repeating [0]opacity[2]thresh[0]softness [24]baseline </pre> </div> <div id="information">Gradient generator 2</div> <div id="main"> <fieldset> <legend>Gradient control</legend> <span> <input type="number" name="rgb-interv" id="rgbinterv" value="34" min="2" max="40" /> <label for="rgbinterv">RGB interval</label> </span> <span> <input type="number" name="gra-interv" id="grainterv" value="24" min="1" max="1000" /> <label for="grainterv">Gradient interval</label> </span> <span> <input type="number" name="degree" id="degree" value="180" min="0" max="360" /> <label for="degree">Degrees</label> </span> <span> <input class="checkbox" type="checkbox" name="random" id="random" value="random" checked="" /><label for="random">random</label> </span> <span> <input class="checkbox" type="checkbox" name="fixed" id="fixed" value="fixed" checked="" /><label for="fixed">fixed</label> </span> <span> <input class="checkbox" type="checkbox" name="revers" id="revers" value="revers" checked="" /><label for="revers">reversed</label> </span> <span class="rgbs"> <input type="number" name="r" id="r" value="13" min="0" max="255" /> <label for="r">R</label> </span> <span class="rgbs"> <input type="number" name="g" id="g" value="13" min="0" max="255" /> <label for="g">G</label> </span> <span class="rgbs"> <input type="number" name="b" id="b" value="13" min="0" max="255" /> <label for="b">B</label> </span> </fieldset> <fieldset> <legend>Push the button</legend> <span> <input class="checkbox" name="radio" id="radial" type="radio" /><label for="radial" >radial</label > </span> <span> <input class="checkbox" name="radio" id="linear" type="radio" checked="checked" /><label for="linear">linear</label> </span> <span> <input class="checkbox" title="repeating or linear" name="repea" id="repea" type="checkbox" checked /><label for="repea">repeating</label> </span> <span> <input type="number" title="Gradient Opacity" name="b" id="opaci" value="0" min="0" max="9" /> <label for="opaci">opacity 0=no</label> </span> <span> <input type="number" title="Maximum lines if reversed x2" name="safe" id="safe" value="20" min="2" max="100" /> <label for="safe">threshold</label> </span> <span> <input type="number" name="softness" id="softness" value="1" min="0" max="5" /> <label for="softness">softness</label> </span> <span> <input type="number" title="like even rows is thicker" name="baseline" id="baseline" value="0" min="0" max="45" /> <label for="baseline">baseline 0=no</label> </span> <button id="makeGrad">generate</button> <textarea id="text" rows="2" cols="10" class="selectable"></textarea> <h3>lines generated: <b id="info"></b></h3> </fieldset> </div> </body> </html>
CSS
html, body { height: 100%; } body { font: 1em/1.5 Verdana, Geneva, sans-serif; margin: 0; padding: 0; color: #555; overflow-x: hidden; min-height: 1000px; } #main { display: grid; position: absolute; top: 24px; right: 0; gap: 4px; float: right; background: #777; padding: 4px 4px 0; border-radius: 0px 0px 0px 4px; -webkit-border-radius: 0px 0px 0px 4px; box-shadow: 0 0 4px 0 #000000, 0 0 1px 0 #eeeeee inset; overflow: hidden; } #main::after { content: ""; clear: both; display: block; } #wrap { display: block; position: relative; margin: 0 auto; } #footer { width: 100%; height: 48px; display: block; position: relative; text-align: right; overflow: hidden; padding: 48px 0 0; } #footer span { padding: 0 24px; } h1 { text-align: center; font-size: 1.5em; line-height: 1; } h3 { font-size: 0.5em; line-height: 1; } input, textarea, select, button { position: relative; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } button, input[type="number"], .checkbox, fieldset, legend { border-radius: 4px; margin: 0; padding: 0; position: relative; border: 0; box-shadow: 0 0 1px 0 #333 inset; vertical-align: baseline; } input[type="number"] { -webkit-appearance: none; margin: 0; max-width: 36px; padding: 0 0 0 4px; color: inherit; overflow: hidden; font-size: 10px; line-height: 2.4; } input, fieldset, textarea { max-width: 350px; } textarea { width: 100%; font-family: "Lucida Console", Monaco, monospace; color: inherit; } fieldset { background: #aaa; overflow: hidden; margin: 0; padding: 36px 12px 12px; position: relative; display: inline-grid; gap: 4px; align-content: baseline; grid-template-columns: repeat(3, 1fr); box-shadow: 0 0 4px 0 #000000, 0 0 1px 0 #eeeeee inset; align-items: center; } fieldset #text { grid-area: 3 / 1 / span 1 / span 3; } fieldset span { white-space: nowrap; position: relative; overflow: hidden; font-size: 0; } legend { background-color: #eee; position: absolute; top: 0; text-indent: 12px; left: 0; width: 100%; } label { display: inline-block; font-size: 10px; line-height: 2.4; padding: 0 4px; vertical-align: bottom; } ::-moz-selection { background: #7bff00; } ::selection { background: #7bff00; } @-webkit-keyframes click-wave { 0% { opacity: 0.7; } 100% { opacity: 0; } } @-moz-keyframes click-wave { 0% { opacity: 0.7; } 100% { opacity: 0; } } @keyframes click-wave { 0% { opacity: 0.7; } 100% { opacity: 0; } } .checkbox { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative; height: 24px; width: 24px; -webkit-transition: all 0.15s ease-out 0s; -moz-transition: all 0.15s ease-out 0s; transition: all 0.15s ease-out 0s; background: #eee; border: none; cursor: pointer; display: inline-block; outline: none; z-index: 1000; font-size: 24px; padding: 0; margin: 0; overflow: hidden; } .checkbox:checked { background: #eee; } .checkbox:checked::before { height: 24px; width: 24px; line-height: 24px; position: absolute; content: "\2716"; display: inline-block; text-align: center; } .checkbox:checked::after { -webkit-animation: click-wave 0.65s; -moz-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #000; content: ""; display: block; position: relative; z-index: 100; } .checkbox:hover { background: #fff; } button:focus { outline: 0 !important; } button::-moz-focus-inner { border: 0; } button { padding: 0; background: #309900; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #333; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 2; } button:hover { background: #777; border: solid 1px #aaa; text-decoration: none; cursor: pointer; } button:active { -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); background: #333; border: solid 1px #777; } .rgbs { width: auto; } #information { position: absolute; top: 0; left: 0; text-indent: 12px; background: rgba(119, 119, 119, 0.8); box-shadow: 0 0 4px 0 #000000, 0 0 1px 0 #eeeeee inset; width: 100%; text-align: center; color: #7bff00; font-weight: 900; overflow: hidden; text-shadow: 0px 1px 0px #000000, 0px 2px 0px #000000, 0px 3px 0px #000000, 0px 4px 0px #000000, 0px 5px 0px #000000, 0px 7px 0px #000000, 0px 7px 0px #000000; } #examp { max-width: 700px; margin: 24px auto; text-align: justify; background: inherit; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: invert(1); } p { display: inline-block; padding: 0; margin: 0; } pre { display: inline; margin: 0; padding: 0; }
JAVASCRIPT
(function() { class Gradients { constructor() { if (!this instanceof Gradients) return new Gradients(); //if without new operator let _main = null; let _colorInterval = []; let _gardiInterval = []; this.setMain = main => (_main = main); this.setColorIntervalValue = (r, g, b) => (this._colorInterval = [r, g, b] || [0, 0, 0]); this.setGradienIntervalVal = first => { this._gardiInterval = first || 0; }; this.getColorIntervalValue = () => this._colorInterval; this.getGradienIntervalVal = () => this._gardiInterval; } } function mainFunc() { let makeButton = document.getElementById("makeGrad"); makeButton.addEventListener("click", mainFunc); let cBody = document.getElementsByTagName("body")[0]; let grad = new Gradients(); let main = grad.setMain(document.getElementById("main")); let cop = document.getElementById("text"); let fixed = document.getElementById("fixed").checked; let radial = document.getElementById("radial").checked; let random = document.getElementById("random").checked; var revers = document.getElementById("revers").checked; let repatng = document.getElementById("repea").checked; let softness = +document.getElementById("softness").value || 0; let cDegree = +document.getElementById("degree").value || 0; let cInterv = +document.getElementById("rgbinterv").value || 10; let gInterv = +document.getElementById("grainterv").value || 10; let baseline = +document.getElementById("baseline").value || 0; let opaci = document.getElementById("opaci").value || 0; let safe = +document.getElementById("safe").value || 100; let r = +document.getElementById("r").value || 0; let g = +document.getElementById("g").value || 0; let b = +document.getElementById("b").value || 0; let string = ""; let temp = 0; let x = 0; let tempColor = []; let tempGradi = []; colorIntervals(); gradiIntervals(); mkeString(); function colorIntervals() { while (safe--) { x++; if (r >= 255 || g >= 255 || b >= 255) break; r += random ? randoms(0, cInterv) : cInterv; g += random ? randoms(0, cInterv) : cInterv; b += random ? randoms(0, cInterv) : cInterv; grad.setColorIntervalValue(r, g, b); tempColor[tempColor.length] = grad.getColorIntervalValue(); } } function gradiIntervals() { if (revers) { baseline = false; x *= 2; tempColor = tempColor.concat(tempColor.slice(1, -1).reverse()); } for (let i = 0; i < tempColor.length; i++) { temp += gInterv; if (baseline > 0 && i % 3 === 0) temp += baseline - 2; grad.setGradienIntervalVal(temp); tempGradi[tempGradi.length] = grad.getGradienIntervalVal(); } temp = 0; tempGradi = tempGradi.map((f, i) => { let es = []; [es[es.length], es[es.length]] = [f, temp]; temp = es[[es.length - 1] - 1]; temp += softness; es.reverse(); return es; }); } function mkeString() { let op = false; string = tempColor.map((o, i, arr) => { if (baseline > 0 && i % 3 === 0) { o = "0, 0, 0"; revers = false; op = true; } else { op = false; } return ` ${opaci > 0 ? "rgba" : "rgb"}(${o}${ opaci > 0 || op ? ",0." + opaci : "" }) ${tempGradi[i].join("px ")}px`; }); let type = repatng ? "repeating-" : ""; let genGrad = (cBody.style.background = (radial ? `${type}radial-gradient(` : `${type}linear-gradient(` + cDegree + "deg, ") + string + ")" + (fixed ? "fixed" : "")); stats(x); cop.innerText = "background:" + genGrad + ";"; } } document.getElementById("text").addEventListener("click", function(e) { if (e.detail === 3) { try { var successful = document.execCommand("copy"); var msg = successful ? "successful" : "unsuccessful"; console.log("Copying text command was " + msg); } catch (err) { console.log("OopsOops, unable to copy"); } } }); function stats(x) { document.getElementById("info").innerText = x; } function randoms(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } window.addEventListener("DOMContentLoaded", mainFunc); })();
Expand for more options Login