共计 2854 个字符,预计需要花费 8 分钟才能阅读完成。
我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。
我是 HullQin,公众号「线下团聚游戏」的作者 (欢送关注公众号,分割我,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《咱们用 48h,单干发明了一款 Web 游戏:Dice Crush,加入国内赛事》加入 Game Jam 2022。喜爱能够关注我噢~我有空了会分享做游戏的相干技术,会在这 2 个专栏里分享:《教你做小游戏》、《极致用户体验》。
1. 遇到问题:本人写网页款式,总是没有「高级感」
如果不给你任何组件库,让你从 0 开发一个网页,本人设计款式,你该怎么做?
你兴许遇到过这种感觉:我的网页色号都是精心筛选的,设置了某个背景色、某个装点色,但看着没有「高级感」。
举个例子
这是我之前开发的一个网页:
我设置了背景色 #fee9f5,装点色#e8e4f5(真的精心筛选了几个小时)。但感觉,很一般。
2. 寻找问题解决方案
为了失去答案,我尝试关上了 ant design。
我心愿看看它的导航栏,用了什么款式,能看起来那么有「高级感」。
还是很好找的,因为抛开“地位”相干的款式,剩下的就能够排除法失去了。答案是:box-shadow
。
也就是说,给你的导航栏,加上这个款式,那么它就会看起来有「高级感」,或者称之为:「立体感」。
header {box-shadow: 0 2px 8px #f0f1f2;}
3. 对于解决方案的思考:为什么加暗影后视觉体验变好了?
太阳照耀,大树会有暗影,任何 3D 物件 都会有暗影。
当然,咱们视网膜内出现的其实都是 立体图形,只是咱们在 3D 世界生存,大脑养成了这样的认知习惯:
如果看到的货色都有暗影,它很可能是个3D 物件(因为只有有高度的物品能力挡住太阳光线,造成暗影。0 高度的货色,是不会有暗影的)。
类比浏览器
咱们能够把 浏览器 当作一张纸,而咱们的网页代码能够在纸上 绘制 、或者 搁置 各种元素。
如果你是在纸上绘制了所有货色,那么它们只是一幅 立体图形。
但如果你在纸上搁置了货色,那么它将是个 3D 物件,是有 高度 的。咱们须要借助 暗影,让大脑潜意识认知到它的高度。
给导航栏加暗影,意味着导航栏高度比主体局部高,就像导航栏压在了网页上。
以此类推,咱们能够给任何货色加暗影,只有你认为,它是 搁置 在网页上,而不是 绘制 在网页上。
4. 有哪些 css 能够实现暗影款式?
暗影款式的实现不少,这里介绍 3 种罕用的,相对能笼罩日常暗影场景:
- box-shadow
- text-shadow
- filter 里的 drop-shadow
box-shadow
它是给盒子模型加暗影,即 border 那一圈的暗影,它是「容器」的暗影。至于容器外部放什么元素,不会影响它的形态。
例子:导航栏(Header)的暗影、菜单(Menu)的暗影、卡片容器(Card)、按钮(Button)的暗影。
box-shadow: offset-x offset-y blur-radius spread color inset;
别离示意:程度暗影偏移、垂直暗影偏移、含糊间隔、暗影尺寸、暗影色彩、将内部暗影 (outset) 改为外部暗影。
这些其实不必刻意去记忆,当你调试好喜爱的暗影参数,保留下来,当前就用同一份,就够了。
text-shadow
它是给文本的暗影,文本是什么形态,暗影就是什么形态。
例子:非常适合给「emoji 按钮」加暗影,因为暗影会跟 emoji 长得截然不同~
text-shadow: offset-x offset-y blur-radius color;
别离示意:程度暗影偏移、垂直暗影偏移、含糊间隔、暗影色彩。
filter 里的 drop-shadow
它是给图片加暗影,暗影会跟图片里不通明元素截然不同。(如果你的图片是齐全不通明的,成果相当于 box-shadow 了,这时候倡议间接用 box-shadow,性能更好)
绝对下面 2 个,它的确是用的比拟少的一种,但非凡场景下,你肯定会喜爱。
filter: drop-shadow(offset-x offset-y blur-radius color);
别离示意:程度暗影偏移、垂直暗影偏移、含糊间隔、暗影色彩。
5. 加了暗影后的成果
你能够再看看文章封面图,能发现哪里有暗影吗?
我心愿每个可交互元素(次要是按钮),都是 搁置 下来的,表明按钮能够「按」,所以每个按钮都有了暗影。
文章结尾的例子
还记得文章结尾的例子吗?这是给它加了暗影后的成果,「立体感」油然而生:
具体包含这些款式:
header {box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
}
img {box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
}
.text-shadow {text-shadow: 0 2px 4px rgb(0 0 0 / 15%);
}
img:active {box-shadow: 0 4px 8px -1px rgb(0 0 0 / 20%), 0 2px 6px -2px rgb(0 0 0 / 20%);
}
.text-shadow:active {text-shadow: 0 3px 6px rgb(0 0 0 / 40%);
}
header
作用在导航栏上,含糊间隔大(6px),表明厚厚的导航栏放在了网页上。img
作用在所有图片上,且含糊间隔小(3px),表明一张张薄薄的照片放在了网页上。如果你按下它,暗影会变更深。.text-shadow
作用在导航栏的主页按钮上、导航栏右上角的✨上、动静右下角的💬上,表明这些文字都放在了网页上,并且能够点击。如果你按下它,暗影会变更深。
为什么按下后(active 态)暗影会变深?
次要是因为,我的网站次要是给挪动端用的,为了让用户造成「反差」的感觉,让用户晓得,按了哪个元素。
如果你感兴趣,我上篇文章着重介绍了这点,欢送浏览《用户体验好的 Button,在手机上不应该有 Hover 态》
倡议
😂 倡议不要滥用暗影,因为那会让网页看起来脏脏的。
你看掘金,如许洁净。只有「悬浮按钮」应用了显著的暗影,表明它具备高度。
6. 写在最初
如果你像我一样,喜爱代码 纯正 一点,不夹杂冗余性能,就能够本人写暗影款式,封装本人所需的组件 😎
如果你只是为了实现他人的需要,还是间接用组件库吧,就没这么多要操心的了。兴许组件库性能很重、体积很大,但思考全面 😁
我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。