پیشنمایش زنده
کد HTML
<div class="glass-card">
<div class="card-header">
<div class="header-dropdown-container">
<input type="checkbox" id="dropdown-toggle" class="hidden-toggle" />
<label for="dropdown-toggle" class="header-dropdown">
<div class="icon-circle"></div>
<span class="title">Glass</span>
<svg class="arrow-down" width="10" height="6" viewBox="0 0 10 6">
<path
d="M1 1L5 5L9 1"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
></path>
</svg>
</label>
<div class="dropdown-menu">
<div class="dropdown-item active">Glass</div>
<div class="dropdown-item">Plastic</div>
<div class="dropdown-item">Metal</div>
</div>
</div>
<div class="beta-tag">Beta</div>
<button class="close-btn">✕</button>
</div>
<hr class="divider" />
<div class="control-group">
<label class="group-label">Light</label>
<div class="light-controls">
<div class="light-preview">
<span class="pin-icon">
<svg
class="torch-svg"
viewBox="0 -0.5 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.0553 15.7213C4.1797 15.7044 3.48357 14.9809 3.5003 14.1053V10.8733C3.48357 9.99772 4.1797 9.27428 5.0553 9.25732H10.7153C11.074 9.25645 11.4209 9.12855 11.6943 8.89632L13.5253 7.35332C13.9965 6.96545 14.6514 6.89018 15.1983 7.16103C15.7452 7.43189 16.0823 7.99846 16.0593 8.60832V16.3703C16.0823 16.9802 15.7452 17.5467 15.1983 17.8176C14.6514 18.0885 13.9965 18.0132 13.5253 17.6253L11.6943 16.0823C11.4209 15.8501 11.074 15.7222 10.7153 15.7213H5.0553Z"
stroke="#0A84FF"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M11.3683 12.4894C11.3683 12.0751 11.0325 11.7394 10.6183 11.7394C10.2041 11.7394 9.86829 12.0751 9.86829 12.4894H11.3683ZM9.86829 15.7214C9.86829 16.1356 10.2041 16.4714 10.6183 16.4714C11.0325 16.4714 11.3683 16.1356 11.3683 15.7214H9.86829ZM21.1461 8.25738C21.4863 8.02111 21.5706 7.55378 21.3343 7.21356C21.098 6.87333 20.6307 6.78907 20.2905 7.02533L21.1461 8.25738ZM17.9635 8.64133C17.6233 8.8776 17.539 9.34494 17.7753 9.68516C18.0115 10.0254 18.4789 10.1096 18.8191 9.87338L17.9635 8.64133ZM21.5003 13.2394C21.9145 13.2394 22.2503 12.9036 22.2503 12.4894C22.2503 12.0751 21.9145 11.7394 21.5003 11.7394V13.2394ZM19.1683 11.7394C18.7541 11.7394 18.4183 12.0751 18.4183 12.4894C18.4183 12.9036 18.7541 13.2394 19.1683 13.2394V11.7394ZM20.2961 17.9538C20.6366 18.1897 21.1038 18.105 21.3397 17.7645C21.5757 17.4241 21.4909 16.9568 21.1505 16.7209L20.2961 17.9538ZM18.8185 15.1049C18.478 14.869 18.0108 14.9537 17.7748 15.2942C17.5389 15.6346 17.6236 16.1019 17.9641 16.3378L18.8185 15.1049ZM9.86829 12.4894V15.7214H11.3683V12.4894H9.86829ZM20.2905 7.02533L17.9635 8.64133L18.8191 9.87338L21.1461 8.25738L20.2905 7.02533ZM21.5003 11.7394H19.1683V13.2394H21.5003V11.7394ZM21.1505 16.7209L18.8185 15.1049L17.9641 16.3378L20.2961 17.9538L21.1505 16.7209Z"
fill="#0A84FF"
></path>
</g>
</svg>
</span>
<div class="gradient-square"></div>
</div>
<div class="light-inputs">
<div class="input-box interactive">📐 -45°</div>
<div class="input-box interactive">
<span>
<svg
style="height:15px; position:relative; top:2px;"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM3.66865 3.71609C3.94815 3.41039 4.42255 3.38915 4.72825 3.66865L6.95026 5.70024C7.25596 5.97974 7.2772 6.45413 6.9977 6.75983C6.7182 7.06553 6.2438 7.08677 5.9381 6.80727L3.71609 4.77569C3.41039 4.49619 3.38915 4.02179 3.66865 3.71609ZM20.3314 3.71609C20.6109 4.02179 20.5896 4.49619 20.2839 4.77569L18.0619 6.80727C17.7562 7.08677 17.2818 7.06553 17.0023 6.75983C16.7228 6.45413 16.744 5.97974 17.0497 5.70024L19.2718 3.66865C19.5775 3.38915 20.0518 3.41039 20.3314 3.71609ZM12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75ZM6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C15.1756 6.25 17.75 8.82436 17.75 12C17.75 15.1756 15.1756 17.75 12 17.75C8.82436 17.75 6.25 15.1756 6.25 12ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12ZM17.0255 17.0252C17.3184 16.7323 17.7933 16.7323 18.0862 17.0252L20.3082 19.2475C20.6011 19.5404 20.601 20.0153 20.3081 20.3082C20.0152 20.6011 19.5403 20.601 19.2475 20.3081L17.0255 18.0858C16.7326 17.7929 16.7326 17.3181 17.0255 17.0252ZM6.97467 17.0253C7.26756 17.3182 7.26756 17.7931 6.97467 18.086L4.75244 20.3082C4.45955 20.6011 3.98468 20.6011 3.69178 20.3082C3.39889 20.0153 3.39889 19.5404 3.69178 19.2476L5.91401 17.0253C6.2069 16.7324 6.68177 16.7324 6.97467 17.0253ZM12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25Z"
fill="#ffffff"
></path>
</g>
</svg>
</span>
100%
</div>
</div>
</div>
</div>
<hr class="divider" />
<div class="sliders-container">
<div class="slider-row">
<label>Refraction</label>
<div class="slider-content">
<div class="slider-wrapper">
<input type="range" class="custom-slider" value="78" />
</div>
<div class="slider-divider"></div>
<span class="slider-value">78</span>
</div>
</div>
<div class="slider-row">
<label>Depth</label>
<div class="slider-content">
<div class="slider-wrapper">
<input type="range" class="custom-slider" value="56" />
</div>
<div class="slider-divider"></div>
<span class="slider-value">56</span>
</div>
</div>
<div class="slider-row">
<label>Dispersion</label>
<div class="slider-content">
<div class="slider-wrapper">
<input type="range" class="custom-slider" value="98" />
</div>
<div class="slider-divider"></div>
<span class="slider-value">98</span>
</div>
</div>
<div class="slider-row">
<label>Frost</label>
<div class="slider-content">
<div class="slider-wrapper">
<input type="range" class="custom-slider" value="60" />
</div>
<div class="slider-divider"></div>
<span class="slider-value">60</span>
</div>
</div>
</div>
</div>
کد CSS
/* Note: dropdown is functional, to see click the dropdown.. */
.glass-card {
width: 290px;
background: rgba(36, 36, 36, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 14px;
padding: 14px 16px;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.3s ease;
}
/* dropdown*/
.card-header {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.header-dropdown-container {
position: relative;
}
.hidden-toggle {
display: none;
}
.header-dropdown {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.header-dropdown:hover {
background: rgba(255, 255, 255, 0.15);
}
.icon-circle {
width: 12px;
height: 12px;
border: 2px solid #8e8e93;
border-radius: 50%;
transition: border-color 0.2s ease;
}
.header-dropdown:hover .icon-circle {
border-color: #0a84ff;
}
.title {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
}
.arrow-down {
color: #8e8e93;
margin-left: 2px;
transition: transform 0.3s ease;
}
/* dropdown Logic */
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
position: absolute;
top: 120%;
left: 0;
background: rgba(40, 40, 40, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 4px;
min-width: 120px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
z-index: 10;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hidden-toggle:checked ~ .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hidden-toggle:checked + .header-dropdown .arrow-down {
transform: rotate(180deg);
color: #ffffff;
}
.dropdown-item {
padding: 6px 8px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
color: #e0e0e0;
transition: all 0.2s ease;
}
.dropdown-item:hover {
background: #0a84ff;
color: white;
}
.dropdown-item.active {
background: rgba(255, 255, 255, 0.1);
}
/* elements */
.beta-tag {
font-size: 11px;
color: #8e8e93;
font-weight: 500;
}
.close-btn {
margin-left: auto;
background: none;
border: none;
color: #8e8e93;
cursor: pointer;
font-size: 14px;
padding: 4px;
transition: all 0.2s ease;
}
.close-btn:hover {
color: #fff;
transform: rotate(90deg);
}
.divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 8px 0;
}
.control-group {
display: flex;
align-items: flex-start;
gap: 16px;
}
.group-label {
font-size: 12px;
color: #8e8e93;
width: 65px;
margin-top: 6px;
}
.light-controls {
display: flex;
gap: 8px;
flex: 1;
background: rgba(0, 0, 0, 0.2);
padding: 8px;
border-radius: 10px;
}
.light-preview {
width: 52px;
height: 52px;
border-radius: 8px;
position: relative;
overflow: hidden;
background: radial-gradient(circle at top left, #a1a1a1, #1a1a1a 70%);
}
.pin-icon {
position: relative;
}
.torch-svg {
height: 20px;
position: absolute;
top: 30px;
left: 30px;
transform: rotate(-140deg);
}
.input-box {
background: rgba(255, 255, 255, 0.06);
padding: 5px 8px;
width: 90px;
border-radius: 6px;
font-size: 12px;
color: #e0e0e0;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 5px;
}
/* Range Slider Section */
.sliders-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.slider-row {
display: flex;
align-items: center;
gap: 12px;
}
.slider-content {
display: flex;
align-items: center;
gap: 10px;
background: rgba(36, 36, 36, 0.75);
height: 35px;
padding-inline: 10px;
border-radius: 5px;
}
.slider-divider {
height: 50%;
width: 2px;
background-color: #cccccc77;
}
.slider-value {
font-weight: 600;
color: #8e8e93;
}
.slider-row label {
font-size: 12px;
color: #8e8e93;
width: 70px;
}
/* The Secret to the Pure CSS Blue Fill */
.slider-wrapper {
flex: 1;
height: 8px;
display: flex;
align-items: center;
border-radius: 3px;
overflow: hidden;
background-color: #1a1a1a;
}
.custom-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: transparent;
outline: none;
cursor: grab;
}
.custom-slider:active {
cursor: grabbing;
}
/* Chrome, Safari, Edge Thumb */
.custom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
box-shadow: -407px 0 0 400px #0a84ff;
transition: transform 0.2s ease;
}
.custom-slider:hover::-webkit-slider-thumb {
transform: scale(1.2);
}
/* Firefox Fill */
.custom-slider::-moz-range-progress {
background-color: #0a84ff;
}
.custom-slider::-moz-range-thumb {
height: 14px;
width: 14px;
border-radius: 50%;
background: #ffffff;
border: none;
}