JS: Making a Color Picker from Scratch, part 1: HTML/ CSS

This is what it will look like.
<div class="color-container">
<h3>Color Picker</h3>
<div id="interface"></div>
</div>
.color-container {
display: flex;
flex-flow: column nowrap;
visibility: hidden;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
color: white;
background: rgb(61, 61, 61);
text-align: center;
width: 570px;
height: 366px;
font-family: "04Font";
font-size: 16px;
padding: 0;
align-self: center;
transform: translate(-50%, -50%);
box-shadow:
2px 0px rgb(255, 255, 255),
-2px 0px rgb(255, 255, 255),
0px -2px rgb(255, 255, 255),
0px 2px rgb(255, 255, 255);
}
<div id="interface">
<div id="left">
<div id="picker">
<canvas id="color-picker"></canvas>
<input type="range" id="hue" name="hue" value="255" min="0" max="255">
</div>
<div id="buttons">
<btn>OK</btn>
<btn>Cancel</btn>
</div>
</div>
</div>
#interface {
display: flex;
flex-flow: row nowrap;
height: 300px;
}
#interface #left {
display: flex;
flex-flow: column nowrap;
height: 346px;
}
#interface #left #picker {
display: flex;
flex-flow: row nowrap;
height: 290px;
width: 330px;
}
#color-picker {
background-color: white;
width: 250px;
height: 250px;
margin: 20px;
box-shadow:
2px 0px rgb(131, 131, 131),
-2px 0px rgb(131, 131, 131),
0px -2px rgb(131, 131, 131),
0px 2px rgb(131, 131, 131);
}
#hue {
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
transform: rotate(90deg);
transform-origin: left;
width: 250px;
height: 20px;
margin: 10px;
background: white;
outline: none;
box-shadow:
2px 0px rgb(131, 131, 131),
-2px 0px rgb(131, 131, 131),
0px -2px rgb(131, 131, 131),
0px 2px rgb(131, 131, 131);
}
#hue::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 5px;
outline: 2px solid rgb(0, 0, 0);
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build a Multilingual Website in React using react-intl v4 in 2020 (1)

Communication Between Components in ReactJS

TypeS — function overloading

Map() Method in JavaScript Simplified!!!

11 GitHub Repositories Every Web Developer Should Know

The Difference of “var” vs “let” vs “const” in Javascript

Which is The Best Method To Find an Item in an Array of Arrays in JavaScript?

Vue.js 3 Composition API: the SetUp Function

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

32 CSS Hover Effect Examples and Code

Futuristic 3D Hover Effect

How To Fix Your Image

Test Driven Development

BerriBasket team’s first expedition 🍓