box-shadow
应该算是比较常用的属性,用于给元素增加内外阴影,以凸显元素在视觉上的层次/立体感。简单的属性却有丰富的表现能力,还不赶紧学起来?
Working,漂亮的UI小姐姐提到了一个“轻拟物style”,CV工程师哪见过此等高级词汇,遂向UI小姐姐请教、深入学习了一番!
一、基本语法
A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. —— 《box-shadow MDN》
从MDN对于box-shadow
的描述,则认为通常的 box-shadow
属性有,阴影效果在X&Y轴的偏移量,其次是模糊度半径、扩散度半径和阴影颜色。
其语法:
/* 通用 */
box-shadow: x-offset y-offset blur-radius spread-radius color;
/* 阴影内扩散属性值: inset, 默认是向外扩散: outset */
box-shadow: x-offset y-offset blur-radius spread-radius [inset] color;
这么长的属性值其实不太好记住,另外通过Chrome浏览器
的“阴影面板选择器”,便可有一个直观的感受:
基本用法示例:
二、轻拟物Style
2.1 什么是轻拟物?
轻拟物是UI设计师提出来的一种新概念,轻拟物是一种立体化、概念化、理想化、易于辨识视觉效果的表达。 —— 《轻拟物设计解析 & 案例演示》
轻拟物,在于一个“轻”字,区别于完全的拟物,是一种轻量化的趋近真实物体的视觉表达。
毋庸置疑,轻拟物风格,给用户传达了更多视觉上的信息,在例如在游戏等强交互场景下,其具有更丰富视觉表达能力,会极大提升用户的产品使用体验。
百闻不如一见,例如下图的虚拟键盘,用上了轻拟物设计,光影结合,其表现就变得更加有质感:
2.2 前端如何表现?
光影是属于实现轻拟物的必要元素,会使得元素表现更有质感,更趋近自然。因此,自然会想到借助CSS
中的box-shadow
来作为主要表现拟物style
的属性。
类比上图中的虚拟键盘,同理可以实现一个轻拟物风格的图标导航。
2.3 实例:一个轻拟物风格的导航
单看box-shadow
的语法还是比较简单的,为了快速上手,我们最好还是得实际操练一番。为此,简单实现一个轻拟物风格的导航
这里简单讲讲图标按钮的两个状态
2.3.1 常态
也就是图标无操作下的状态
没加阴影属性,微信图标的样子长这样:
加上阴影属性后:
.container .box .img {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
/* 正方形图标圆角半径20px */
border-radius: 20px;
/* 第一个值是外阴影X&Y轴方向偏移18px,模糊度半径是30px,阴影颜色为0.2透明度的黑色 */
/* 第二个值是外阴影X&Y轴方向偏移-18px,模糊度半径是30px,阴影颜色为白色 */
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
-18px -18px 30px rgba(255, 255, 255, 1);
/* tricks: 利用transition给常态于按压态两者状态互相变换过程增加缓动动画 */
transition: all 0.2s ease-in-out;
}
效果是这样的
是不是瞬间有了层次感、纹理感
2.3.2 按压态
当图标按钮被鼠标按压时候的状态叫做按压态,那么为了尽可能充分模拟在物理上的“按压起伏”操作,结合box-shadow
属性可以表现出的层次感和空间感的变化,来模拟按压起伏的效果
在CSS中,鼠标按下的元素会有一个对应的:active
伪类被激活生效,可以把此属性“激活态”理解为“按压态”。
.container .box .img:active {
/* 第一二个属性是用于在基于常态的outset变化的渐变过程 */
/* 第三个属性内阴影,X&Y轴偏移18px,模糊度半径为30px,阴影颜色为0.1透明度的黑色,自左上至右下 */
/* 第四个属性内阴影,X&Y轴偏移-18px,模糊度半径为30px,阴影颜色为白色,自右下至左上 */
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
0 0 0 rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
}
最终的表现效果如下:
完整代码和效果可见:Simulation Style - Codepen
三、工具推荐
通过上面的实例,细心的读者会发现,为啥我要用18px
的偏移,30px
的模糊度半径对吧?在实际开发的过程中,好看的UI小姐姐一般会给到我们设计稿,从设计稿中的属性会有对应的CSS
值,基本上拿来可用。
但如果作为一个个人开发者,或者等等场景下,没有好看的UI小姐姐做设计咋办?国外的小哥搞了一个在线轻拟物风格box-shadow
属性调参的网站 —— Neumorphism
四、总结
box-shadow
属性语法本身并不复杂,但其表现能力却丰富到令人惊叹。轻拟物是一种在前端元素上的一种光影效果,目前在简单的“光影效果“需求box-shadow
足以满足产品需求,如果还想要做到如游戏般细腻丝滑的“光追效果”,可以尝试WebGL
来实现。
从box-shadow
这一简单属性,我们能够看到,现代用户对于产品品质的不满足以及追求促使着前端业务的发展,也可以畅想,未来的前端的表现力将会是以满足多感官为主,用户所见、所触达之处,皆为“前端”!
最后,关注博主微信公众号:ITDYBOY
,我们一起学习,茶话前端...