mirror of
https://github.com/MrEidam/Color-Cube.git
synced 2026-06-28 15:39:25 +00:00
V1
This commit is contained in:
33
index.html
Normal file
33
index.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Cube</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="icon" href="./icon.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="cube">
|
||||||
|
<div class="top" id="top"></div>
|
||||||
|
<div class="before" id="before"></div>
|
||||||
|
<div class="after" id="after"></div>
|
||||||
|
<div>
|
||||||
|
<span class="side" style="--i:0;"></span>
|
||||||
|
<span class="side" style="--i:1;"></span>
|
||||||
|
<span class="side" style="--i:2;"></span>
|
||||||
|
<span class="side" style="--i:3;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="colors">
|
||||||
|
<span style="--clr:#00ff00;" onclick="CColor('#00ff00', '0,255,0,')" class="cl active"></span>
|
||||||
|
<span class="cl" style="--clr:#ff0000;" onclick="CColor('#ff0000')"></span>
|
||||||
|
<span class="cl" style="--clr:#006FCD;" onclick="CColor('#006FCD')"></span>
|
||||||
|
<span class="cl" style="--clr:#ffff00;" onclick="CColor('#ffff00')"></span>
|
||||||
|
<span class="cl" style="--clr:#ff6900;" onclick="CColor('#ff6900')"></span>
|
||||||
|
<span class="cl" style="--clr:#ffffff;" onclick="CColor('#ffffff')"></span>
|
||||||
|
<span class="cl" style="--clr:#6441a5;" onclick="CColor('#6441a5')"></span>
|
||||||
|
</div>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
62
main.js
Normal file
62
main.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
/*function CColor(color){
|
||||||
|
document.querySelectorAll('.side').forEach((element) => {
|
||||||
|
element.style.background =
|
||||||
|
'linear-gradient(to bottom, #151515, '+color+')';
|
||||||
|
});
|
||||||
|
document.getElementById('top').style.setProperty('--color', color);
|
||||||
|
|
||||||
|
//before.style.setProperty('--color',color)
|
||||||
|
|
||||||
|
// active marking
|
||||||
|
document.getElementsByClassName('cl').forEach(function(item){
|
||||||
|
item.classList.remove('active');
|
||||||
|
})
|
||||||
|
event.target.classList.add('active');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}*/
|
||||||
|
let Shadow
|
||||||
|
function CColor(color, rgb) {
|
||||||
|
// Change the background of elements with the class 'side'
|
||||||
|
document.querySelectorAll('.side').forEach((element) => {
|
||||||
|
element.style.background = 'linear-gradient(to bottom, #151515, ' + color + ')';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set the '--color' CSS variable on the #top element
|
||||||
|
let before = document.getElementById('before')
|
||||||
|
before.style.setProperty('--color', color);
|
||||||
|
document.getElementById('after').style.setProperty('--color', color);
|
||||||
|
|
||||||
|
/*
|
||||||
|
// Box - Shadow
|
||||||
|
Shadow = {
|
||||||
|
a:`0 0 120px rgba(${rgb}0.2)`,
|
||||||
|
b:`,0 0 200px rgba(${rgb}0.4)`,
|
||||||
|
c:`,0 0 300px rgba(${rgb}0.6)`,
|
||||||
|
d:`,0 0 400px rgba(${rgb}0.8)`,
|
||||||
|
e:`,0 0 500px rgba(${rgb}1)
|
||||||
|
;`}
|
||||||
|
document.getElementById('before').style.setProperty('--sh', `${Shadow.a}${Shadow.b}${Shadow.c}${Shadow.d}${Shadow.e}`);
|
||||||
|
|
||||||
|
// Construct the box-shadow property
|
||||||
|
const boxShadowValue = `0 0 120px rgba(${rgb}, 0.2), 0 0 200px rgba(${rgb}, 0.4), 0 0 300px rgba(${rgb}, 0.6), 0 0 400px rgba(${rgb}, 0.8), 0 0 500px rgba(${rgb}, 1)`;
|
||||||
|
|
||||||
|
// Set the box-shadow property directly
|
||||||
|
document.getElementById('before').style.boxShadow = boxShadowValue;*/
|
||||||
|
|
||||||
|
// Shadow
|
||||||
|
Shadow = `0 0 120px ${color+'33'},0 0 200px ${color+'66'},0 0 300px ${color+'99'},0 0 400px ${color+'cc'}`
|
||||||
|
let Shadow4 = `,0 0 500px ${color};`
|
||||||
|
before.style.boxShadow = Shadow// + Shadow4
|
||||||
|
|
||||||
|
|
||||||
|
// Active marking
|
||||||
|
let elementsWithClClass = document.getElementsByClassName('cl');
|
||||||
|
Array.from(elementsWithClClass).forEach(function (item) {
|
||||||
|
item.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
event.target.classList.add('active');
|
||||||
|
console.log(Shadow);
|
||||||
|
}
|
||||||
109
style.css
Normal file
109
style.css
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #050505;
|
||||||
|
}
|
||||||
|
.cube{
|
||||||
|
position: relative;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
animation: animate 4s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes animate{
|
||||||
|
from{transform: rotateX(-30deg) rotateY(0deg);}
|
||||||
|
to{transform: rotateX(-30deg) rotateY(360deg);}
|
||||||
|
}
|
||||||
|
.cube div{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
.cube div span{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(#151515, #00ec00);
|
||||||
|
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
|
||||||
|
}
|
||||||
|
.top{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: #222;
|
||||||
|
transform: rotateX(90deg) translateZ(150px);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: var(--color,#00ec00);
|
||||||
|
transform: rotateX(90deg) translateZ(-150px);
|
||||||
|
}
|
||||||
|
.before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: var(--color,#0f0);
|
||||||
|
transform: rotateX(90deg) translateZ(-230px);
|
||||||
|
filter: blur(20px);
|
||||||
|
box-shadow: 0 0 120px rgba(0,255,0,0.2),
|
||||||
|
0 0 200px rgba(0,255,0,0.4),
|
||||||
|
0 0 300px rgba(0,255,0,0.6),
|
||||||
|
0 0 400px rgba(0,255,0,0.8);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.colors{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
padding: 0px 15px 5px 15px;
|
||||||
|
background: #444;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
filter: drop-shadow(0 0 20px #888);
|
||||||
|
border-radius: 0 0 50px 50px;
|
||||||
|
}
|
||||||
|
.colors span{
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: var(--clr);
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.colors span:hover{
|
||||||
|
filter: brightness(0.5);
|
||||||
|
scale: 1.25;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.colors span.active{
|
||||||
|
filter: drop-shadow(2px 2px 4px #888);
|
||||||
|
scale: 1.5;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user