从box-shadow属性望见前端未来

1,542 阅读5分钟

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设计师提出来的一种新概念,轻拟物是一种立体化、概念化、理想化、易于辨识视觉效果的表达。 —— 《轻拟物设计解析 & 案例演示

轻拟物,在于一个“轻”字,区别于完全的拟物,是一种轻量化的趋近真实物体的视觉表达。

轻拟物

毋庸置疑,轻拟物风格,给用户传达了更多视觉上的信息,在例如在游戏等强交互场景下,其具有更丰富视觉表达能力,会极大提升用户的产品使用体验。

百闻不如一见,例如下图的虚拟键盘,用上了轻拟物设计,光影结合,其表现就变得更加有质感:

Virtual keyboard

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

完整代码和效果可见:Simulation Style - Codepen

三、工具推荐

通过上面的实例,细心的读者会发现,为啥我要用18px的偏移,30px的模糊度半径对吧?在实际开发的过程中,好看的UI小姐姐一般会给到我们设计稿,从设计稿中的属性会有对应的CSS值,基本上拿来可用。

但如果作为一个个人开发者,或者等等场景下,没有好看的UI小姐姐做设计咋办?国外的小哥搞了一个在线轻拟物风格box-shadow属性调参的网站 —— Neumorphism

Neumorphism

四、总结

box-shadow属性语法本身并不复杂,但其表现能力却丰富到令人惊叹。轻拟物是一种在前端元素上的一种光影效果,目前在简单的“光影效果“需求box-shadow足以满足产品需求,如果还想要做到如游戏般细腻丝滑的“光追效果”,可以尝试WebGL来实现。

box-shadow这一简单属性,我们能够看到,现代用户对于产品品质的不满足以及追求促使着前端业务的发展,也可以畅想,未来的前端的表现力将会是以满足多感官为主,用户所见、所触达之处,皆为“前端”!

最后,关注博主微信公众号:ITDYBOY,我们一起学习,茶话前端...