<div class="container">
<div class="target">
</div>
</div>
<form>
<input type="text" placeholder="R" id="r">
<input type="text" placeholder="G" id="g">
<input type="text" placeholder="B" id="b">
<input type="submit">
</form>
div.container {
width: 500px;
height: 500px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
background: rgb(123, 104, 238);
}
div.target {
border-radius: 25%;
height: 200px;
width: 200px;
box-shadow: -5px -5px 10px rgb(148, 129, 263), 5px 5px 10px rgb(98, 79, 213);
transition: 0.5s;
}
div:hover {
box-shadow: none;
transition: 0.5s;
}
//test 123,104,238 - mediumslateblue or 0,128,255 - lightblue
var container = document.querySelector(".container");
var target = document.querySelector(".target");
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function (event) {
event.preventDefault();
var r = document.getElementById("r").value;
var g = document.getElementById("g").value;
var b = document.getElementById("b").value;
var bg = `rgb(${r},${g},${b})`;
container.style.background = bg;
target.style.background = bg;
var rnum = parseInt(r);
var gnum = parseInt(g);
var bnum = parseInt(b);
//r,g,b must be num to perform math
var rpale = rnum + 25;
var gpale = gnum + 25;
var bpale = bnum + 25;
//========
var rdark = rnum - 25;
var gdark = gnum - 25;
var bdark = bnum - 25;
var pale = `rgb(${rpale},${gpale},${bpale})`;
var dark = `rgb(${rdark},${gdark},${bdark})`;
console.log(pale);
console.log(dark);
target.style.boxShadow = `-5px -5px 10px ${pale}, 5px 5px 10px ${dark}`;
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.