我是正在努力学习前端的Mancuoj,欢迎关注互相交流!
前言
那天在codepen看到了别人做的color picker
就突发奇想自己复刻一个VS Code的调色板,我也是刚开始学前端嘛,看见啥都想试着写一个。
说干就干,花了几个小时写了一个,bug贼多,就是一个想法,也懒得改了,菜鸡一个,大佬勿喷。
我们先来看看原版长啥样(颜色过多的话gif会失真,大概看看):
可以看到上方用来显示颜色和色值,点击可以切换三种色彩显示方式,分别是rgba,hsla和hex8;然后下方左侧一个色谱来选择颜色,右侧两个滑块选择透明度和色相。
右上角的显示原来的颜色和最下方的文字提示这次就先不写了🙈
然后看看我几个小时复刻的结果(在线预览):
HTML+CSS
HTML没啥好说的,就div套div。
我大概画了一下整体布局:
透明背景
这背景的黑白格子上来就给我整蒙了,还得是万能的搜索啊,最后用线性渐变解决了:
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0.4) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.4) 75%,
rgba(0, 0, 0, 0.4)
),
linear-gradient(
45deg,
rgba(0, 0, 0, 0.4) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.4) 75%,
rgba(0, 0, 0, 0.4)
);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
下半部分
透明度和色相选择部分都用线性渐变解决:
// 透明度
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
// 色相
background: linear-gradient(to bottom,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%)
);
滑块左右要各超出去1px:
.slide {
width: 27px;
height: 5px;
border: 1px solid #eee;
position: absolute;