HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Make gradients</title>
<style>
html, body {height: 100%;}
body{
font: 1em/1.5 Verdana, Geneva, sans-serif;
margin:0;
padding:0;
color: #777;
overflow-x: hidden;
min-height: 1000px;
}
#main {float: right; display: block; position: relative; width: 240px;height: 100%;}
#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;}
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: 240px;}
textarea{width:100%;font-family: "Lucida Console", Monaco, monospace; color: inherit;
}
fieldset{
background-color: #eba775;
overflow: hidden;
margin: 24px 24px 0;
padding: 36px 12px 12px;
position: relative;
}
fieldset span {
white-space:nowrap;
display: inline-block;
position: relative;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
legend {
background-color: #be9361;
width: 100%;
position: absolute;
top: 0;
padding: 0;
margin: 0;
left: 0;
text-indent: 4px;
max-height: 24px;
overflow: hidden;
}
label {
display: inline-block;
font-size: 10px;
line-height: 2.4;
padding: 0 4px;
vertical-align:bottom;
}
@-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: 12px 24px;
background: #aaa;
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;
}
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; padding: 24px; top:0; left: 0; color: #eee;}
</style>
</head>
<body>
<div id="wrap">
<div id="information">ℕumber of lines generated: <span id="info"></span></div>
<div id="main">
<fieldset>
<legend>Gradient control</legend>
<span>
<input type="number" name="rgb-interv" id="rgbinterv" value="5" min="0" max="40">
<label for="rgbinterv">RGB interval</label>
</span>
<span>
<input type="number" name="gra-interv" id="grainterv" value="48" min="0" max="1000" >
<label for="grainterv">Gradient interval</label>
</span>
<span>
<input type="number" name="degree" id="degree" value="135" 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" 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 type="number" name="b" id="opaci" value="0" min="0" max="9">
<label for="opaci">opacity 0=no</label>
</span>
<span class="rgbs" >
<input type="number" name="r" id="r" value="155" min="0" max="255">
<label for="r">R</label>
</span>
<span class="rgbs" >
<input type="number" name="g" id="g" value="100" min="0" max="255">
<label for="g">G</label>
</span>
<span class="rgbs">
<input type="number" name="b" id="b" value="120" min="0" max="255">
<label for="b">B</label>
</span>
</fieldset>
<fieldset>
<legend>Grab the code</legend>
<textarea id="text" rows="3" cols="20"></textarea>
</fieldset>
<fieldset>
<legend>Push the button</legend>
<button id="makeGrad">generate GRADIENT</button>
</fieldset>
</div>
<div id="footer">
<span>2018 by Kostas Šliažas</span>
</div>
</div>
<script>
(function(){
"use strict";
const color = {
r: 255,
g: 255,
b: 255,
a: 0,
makeRGB: function(){
return "rgb" + (this.a>0? "a" : "") + "(" + this.r + ", " + this.g + ", " + this.b + (this.a>0? ", ." + this.a : "")+")";
}
};
function randoms(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function makeGrad() {
let opaci = document.getElementById("opaci").value || 0;
let fixed = document.getElementById("fixed").checked;
let radial = document.getElementById("radial").checked;
let random = document.getElementById("random").checked;
let cBody = document.getElementsByTagName("body")[0];
let gInterv = +document.getElementById("grainterv").value || 48;
let tInterv = 0;
let cInterv = +document.getElementById("rgbinterv").value || 5;
let cString = "";
let cDegree = +document.getElementById("degree").value || 45;
let x = 0;
color.r = +document.getElementById("r").value || 255;
color.g = +document.getElementById("g").value || 255;;
color.b = +document.getElementById("b").value || 255;;
color.a = opaci;
console.log(color.a);
while( color.r > 10 && color.b > 10 && color.g > 10 ){
x++;
if(cString) {cString += " " + ((x>1)&&(tInterv += (x % 2 === 0)&&gInterv)) + "px, "};
if( x % 2 === 0){
let col = color.makeRGB();
color.r -= (random)?randoms(0,cInterv):cInterv;
color.g -= (random)?randoms(0,cInterv):cInterv;
color.b -= (random)?randoms(0,cInterv):cInterv;
cString += col;
}
};
let cop = document.getElementById("text");
let genGrad = cBody.style.background = (radial?"repeating-radial-gradient(":"repeating-linear-gradient("+ cDegree +"deg, ")
+cString+") "+ (fixed?"fixed":"");
cop.innerText = "background:" + genGrad + ";";
cop.select();
reversed(x/2);
try {
let successful = document.execCommand('copy');
let msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
}
function reversed(x) {
document.getElementById("info").innerText = x;
console.log(x);
}
document.getElementById("makeGrad").addEventListener("click", makeGrad);
makeGrad();
}());
</script>
</body>
</html>
