chris/color-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed drop shadows, and shine

Browse Source
This commit is contained in:
chris 2025-07-14 12:43:56 -04:00
parent 861d281db4
commit 3b52b90e5c
4 changed files with 50 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

BIN
images/chrome-blue.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 41 KiB

28
script.js
View File

@ -35,6 +35,8 @@ fetch('colors.json')
const swatch = document.createElement('div'); const swatch = document.createElement('div');
swatch.classList.add('color-swatch'); swatch.classList.add('color-swatch');
swatch.dataset.color = color.hex; swatch.dataset.color = color.hex;
swatch.style.color = color.hex;
const backgroundDiv = document.createElement('div'); const backgroundDiv = document.createElement('div');
backgroundDiv.classList.add('color-background'); backgroundDiv.classList.add('color-background');
@ -49,16 +51,17 @@ fetch('colors.json')
backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`); backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
} }
if (isLightColor(color.hex)) {
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
}
swatch.appendChild(backgroundDiv);
const shineImg = document.createElement('img'); const shineImg = document.createElement('img');
shineImg.classList.add('color-shine'); shineImg.classList.add('color-shine');
shineImg.src = "shine.svg"; shineImg.src = "shine.svg";
shineImg.alt = ""; shineImg.alt = "";
if (isLightColor(color.hex)) {
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
shineImg.classList.add('has-halo');
}
swatch.appendChild(backgroundDiv);
swatch.appendChild(shineImg); swatch.appendChild(shineImg);
const colorName = document.createElement('span'); const colorName = document.createElement('span');
@ -143,20 +146,21 @@ function renderSelectedPalette() {
backgroundDiv.style.backgroundColor = color.hex; backgroundDiv.style.backgroundColor = color.hex;
} }
if (isLightColor(color.hex)) {
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
}
if (color.metallic && color.chromeType) { if (color.metallic && color.chromeType) {
backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`); backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
} }
swatch.appendChild(backgroundDiv);
const shineImg = document.createElement('img'); const shineImg = document.createElement('img');
shineImg.classList.add('color-shine'); shineImg.classList.add('color-shine');
shineImg.src = "shine.svg"; shineImg.src = "shine.svg";
shineImg.alt = ""; shineImg.alt = "";
if (isLightColor(color.hex)) {
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
shineImg.classList.add('has-halo');
}
swatch.appendChild(backgroundDiv);
swatch.appendChild(shineImg); swatch.appendChild(shineImg);
const svgNS = "http://www.w3.org/2000/svg"; const svgNS = "http://www.w3.org/2000/svg";

38
style.css
View File

@ -151,34 +151,13 @@ footer {
max-width: min-content; max-width: min-content;
position: relative; position: relative;
overflow-wrap: break-word; overflow-wrap: break-word;
transition: filter 0.3s ease;
filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
} }
/* .color-swatch {
width: 55px;
height: 65px;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: transform 0.2s ease;
} */
.color-swatch::before {
content: '';
position: absolute;
top: 10%;
left: 20%;
width: 60%;
height: 40%;
border-radius: 50% / 30%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0) 70%
);
pointer-events: none;
/* filter: blur(4px); */
}
.metallic-element[data-color="#FFD700"] { .metallic-element[data-color="#FFD700"] {
background: linear-gradient(to bottom, #B88606, #79550E); background: linear-gradient(to bottom, #B88606, #79550E);
@ -208,17 +187,16 @@ footer {
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
/* This is the base shadow for depth and lift */
box-shadow:
inset 2px 2px 6px rgba(255, 255, 255, 0.6), /* Inner highlight for depth */
0 4px 8px rgba(0, 0, 0, 0.2); /* Outer shadow for lift */
} }
.color-shine.has-halo {
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
}
.color-swatch:hover, .color-swatch:hover,
.color-swatch:active { .color-swatch:active {
transform: scale(1.2); transform: scale(1.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
} }