Eidam/Color-Cube
1
0
Fork 0
mirror of https://github.com/MrEidam/Color-Cube.git synced 2026-06-28 07:29:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

V1

Browse Source
This commit is contained in:
MrEidam
2023-09-02 23:51:46 +02:00
commit 59ac548eeb
4 changed files with 204 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

33
index.html Normal file
View 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
View 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
View 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;
}