Neon color selector
Html
<div class="colors">
<div class="color active" onclick="selectcolor(this)" style="
--gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="color" onclick="selectcolor(this)" style="
--gradient: linear-gradient(135deg, #3cfd7f, #02fa99, #00f6af, #00f1c1, #12ebcf);">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="color" onclick="selectcolor(this)" style="
--gradient: linear-gradient(to right bottom, #2eadff, #3d83ff, #7e61ff);">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="leftbar" style="--gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);"></div>
<div class="rightbar" style="--gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);"></div>
</div>
Css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
font-family: "Inter";
font-size: 16px;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
width: 100%;
background: #0c0c0b;
overflow: hidden;
display: grid;
place-content: center;
}
.colors {
display: flex;
justify-content: center;
position: relative;
background: #29292c;
border-radius: 1rem;
overflow: hidden;
padding: 0.5rem 1.5rem;
}
.colors:before {
position: absolute;
content: "";
inset: 0.0625rem;
border-radius: 0.9375rem;
background: #18181b;
z-index: 2
}
.leftbar, .rightbar {
position: absolute;
content: "";
width: 0.25rem;
border-radius: 0.125rem;
background: var(--gradient);
transition: transform 300ms ease;
z-index: 4;
}
.leftbar {
inset: 0.65rem auto 0.65rem 0.5rem;
animation: leftIn 400ms ease;
}
.rightbar {
inset: 0.65rem 0.5rem 0.65rem auto;
animation: rightIn 400ms ease;
}
@media (hover: hover) {
.colors:hover .leftbar {
transform: translateX(0.15rem)
}
.colors:hover .rightbar {
transform: translateX(-0.15rem)
}
}
@keyframes leftIn {
from {
transform: translateX(0.5rem) scale(0.9);
opacity: 0;
}
}
@keyframes rightIn {
from {
transform: translateX(-0.5rem) scale(0.9);
opacity: 0;
}
}
@keyframes leftOut {
to {
transform: translateX(-0.7rem) scale(1.1);
opacity: 0;
}
}
@keyframes rightOut {
to {
transform: translateX(0.7rem) scale(1.1);
opacity: 0;
}
}
.color {
position: relative;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
z-index: 6;
margin: 0.5rem;
}
.color > div {
position: absolute;
content: "";
border-radius: 50%;
}
.color > div:nth-child(1) {
border: 0.0625rem solid #29292c;
inset: 0rem;
opacity: 1;
transition: transform 450ms ease, opacity 450ms ease;
}
.color.active > div:nth-child(1) {
opacity: 0;
transform: scale(1.2);
transition: transform 300ms ease, opacity 300ms ease;
}
.color > div:nth-child(2) {
background: var(--gradient);
inset: 0;
transform: scale(0.7);
transition: transform 450ms ease;
}
.color.active > div:nth-child(2) {
transform: scale(1);
transition: transform 300ms ease;
}
.color > div:nth-child(3) {
background: #18181b;
inset: 0rem;
transform: scale(0);
transition: transform 300ms ease;
}
.color.active > div:nth-child(3) {
transform: scale(0.85);
transition: transform 300ms ease;
}
.color > div:nth-child(4) {
background: var(--gradient);
inset: 0rem;
transform: scale(0);
transition: transform 300ms ease;
}
.color.active > div:nth-child(4) {
transform: scale(0.6);
transition: transform 375ms ease 75ms;
}
Js
// if the pen is in thumbnail view, scale it up
if (location.pathname.match(/fullcpgrid/i) ? true : false) {
document.documentElement.style.fontSize = "32px"
}
const colorsEl = document.querySelector(".colors")
function selectcolor(el) {
if (el.classList.contains("active")) {return}
document.querySelector(".active").classList.remove("active")
el.classList.add("active")
document.querySelectorAll(".leftbar").forEach(barEl => barEl.style.animation = "leftOut 400ms ease forwards")
document.querySelectorAll(".rightbar").forEach(barEl => barEl.style.animation = "rightOut 400ms ease forwards")
const el1 = document.createElement("div");
el1.classList.add("leftbar");
el1.style.setProperty("--gradient", el.style.getPropertyValue("--gradient"))
colorsEl.appendChild(el1)
const el2 = document.createElement("div");
el2.classList.add("rightbar");
el2.style.setProperty("--gradient", el.style.getPropertyValue("--gradient"))
colorsEl.appendChild(el2)
}
ثبت نظر خود
برای ثبت نظر باید ابتدا وارد حساب کاربری خود شوید.
ورود یا ثبت نامنظری ثبت نشده است