Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add more knob optimization

Browse source
This commit is contained in:
lolabird 2023-11-12 13:09:20 -07:00
commit 8021862bf0
2 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -42,8 +42,11 @@
<div class="slider"> <div class="slider">
<label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label> <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
<input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16"> <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
<div class="knob" id="range-knob"> <div class="knob-container">
<div class="knotch" id="range-knotch"></div> <div class="knob" id="range-knob">
<div class="knotch" id="range-knotch"></div>
</div>
<div class="knob-shadow"></div>
</div> </div>
</div> </div>

30
style.css
View file

@ -42,7 +42,7 @@ footer {
opacity: .8; opacity: .8;
} }
button, .container, .color-input, .knob { button, .container, .color-input {
box-shadow: 1px 2px 10px 1px #555; box-shadow: 1px 2px 10px 1px #555;
cursor: pointer; cursor: pointer;
} }
@ -120,6 +120,22 @@ button {
display: none; display: none;
} }
.knob-container {
position: relative;
}
.knob-shadow {
width: 95px;
height: 95px;
border-radius: 50%;
box-shadow: 1px 2px 10px 1px #555;
position: absolute;
top: 5%;
left: 1%;
z-index: -1;
}
.knob { .knob {
width: 95px; width: 95px;
height: 95px; height: 95px;
@ -127,8 +143,10 @@ button {
cursor: pointer; cursor: pointer;
background: #bbb; background: #bbb;
margin-top: 5px; margin-top: 5px;
position: relative;
z-index: 1;
transform-style: preserve-3d; transform-style: preserve-3d;
will-change: transform, box-shadow; will-change: transform;
} }
.knotch { .knotch {
@ -152,8 +170,16 @@ button {
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.knob { .knob {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.knob-shadow {
width: 50px;
height: 50px;
top: 8%;
left: 1%;
}
} }