那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

前言

开启这个系列的原因主要是,很多设计师与技术沟通有障碍,对一些基础的网页样式代码、框架结构、动效很陌生,不利于前端快速开发。

其实设计师懂一些基础代码是很有必要的。pc网站、手机h5很多使用了 html+css,这是用来做web开发最常用最基本的技术,对设计师来说门槛很低、上手也很快。

实际上,在PS和Sketch中,我们做的一些效果已经可以直接导出css代码。

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客
那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

越来越多的UI设计师开始跟上潮流学习前端知识为自己充电。从本篇开始,我们将以html+css为例,一起了解下那些设计师经常用但又不明白怎么实现的效果,提高UI设计的效率。

box-shadow阴影

在UI界面中,投影或者叫阴影,是一个经常使用的效果,很多网站也都使用了投影效果。

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

有道精品课的商品hover效果

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

百度网盘的按钮投影

设计师做投影效果很简单,直接勾选投影样式,然后调节对应参数即可。

在Sketch中是这样的

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

设计师都很熟悉。阴影其实不用做切图处理,技术同学简单几个代码就可以搞定。

那么程序员用什么方法实现投影呢?

在css中这个投影叫做box-shadow,是给盒子(或者叫容器)增加投影的样式。它的属性代码是这样的:

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

和Sketch的展现基本一致,唯一不同的是,css颜色代码是放在最后的。

看到这里,大家会发现css和Sketch有着惊人的相似之处,其实Sketch中的各种属性基本上都可以导出对应的css代码,甚至可以说,Sketch是css的可视化设计工具。这也是为什么Sketch是目前最适合UI设计师使用的界面设计工具。

多重投影

在Sketch中,我们可以在一个矩形外面加多个投影,比如这样

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

css也能实现这样的效果,原理和sketch一模一样,就是在原先基础上去增加新的投影。

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

内部投影

以上是外部投影,投影出现在按钮的下面,有时候我们会根据需要添加按钮的内部投影,比如按钮高光效果。在sketch中投影和内部投影是分开的

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

在css中同样也有内部投影

那些设计师经常用但又不明白怎么实现的网页效果:box-shadow-UI黑客

只是在前面的例子中,我们没有写出来inset这个属性值,如果为空则表示默认外部阴影。同样内阴影也可以增加多个,方法和外阴影一样。

总结

以上就是阴影效果设计样式和css代码的区别和关系,实际上css的阴影还有一些更深层次的理论知识,跟设计师关系不太大,属于程序员的工作范畴。

Sketch和PS已经可以把简单的效果导出css样式,说明设计与技术正在紧密结合,甚至一定程度上可以互相转化。现在已经有一些插件可以把Sketch界面转化成html代码,随着技术进步,以后设计的页面不需要前端来切图,直接就可以变成网页,让我们拭目以待。