CSS的设计艺术

CSS是编程科技与设计艺术结合得最为完美的一项技术,编程的优雅在于代码的清晰可读,而设计的优雅在于能够结合技术为用户带来一场视觉和交互的盛宴

编码规范

虽然说实现了代码的效果是首要的,代码写得是否优美是次要的,但是对于一个优秀的程序员个人来说,代码清晰可读也方便你以后的维护,代码本身也是一件艺术品,值得你平时留意雕琢。

更为重要的是在实际开发中代码不会是一个人的事情,会有很多人一起来参与同一个项目,只有让每一行代码都像是同一个人编写的,代码才方便团队其他人Code Review。为此每个大公司都会有自己的一套代码规范,这里推荐一下AlloyTeam的编码规范。

技术文档:腾讯前端团队AlloyTeam的编码规范

这个文档大家可以以后常来看看,不断训练自己写代码的习惯,学习时先花十分钟左右的时间浏览一下即可。

Filter滤镜

滤镜对于设计师来说一定不会陌生,CSS也有滤镜filter属性,可以对图片进行高斯模糊、调整对比度、转换为灰度图像、色相旋转、图片透明等操作。

相比于Photoshop等工具的滤镜效果来说,使用CSS可以批量化处理图片滤镜效果,而且通过编程的手段不仅可以叠加各种效果,而且还能与交互相结合。

这里我们主要介绍用的最多的三个滤镜效果,高斯模糊blur,图片变灰grayscale(%),图片透明opacity(%),其他滤镜效果大家以后可以阅读技术文档。

技术文档:滤镜属性

使用VS Code新建一个smart.html,使用emmet语法快速搭建html框架,之后将下面代码输入到body标签内,保存后使用浏览器查看效果。

图片由灰色变为彩色

在实际应用中,会在网站上添加很多不同色系的图片,比如合作伙伴的logo、嘉宾的照片、新闻图片等,为了让照片和网站的色系保持一致,因此就需要对所有图片进行统一的滤镜处理,而将图片变灰是比较常见的一种做法。

有时我们还会给这些变灰的图片添加一个交互特效,那就是当鼠标悬停在图片上时,图片会由灰色变为彩色。代码如下:

高斯模糊的背景

高斯模糊是UI设计师经常用到的一个特效。平面设计师通常是人工、手动去给图片设计样式,而UI设计师则可以结合CSS给相同类别的所有图片添加统一的样式,比如我们希望每个用户信息页的背景、每篇文章顶部的背景都不一样。

UI设计师在处理网页元素的设计时,不会像平面设计师一样可以对每个元素都差异化的精心雕琢,毕竟CSS是没法做到像Photoshop等设计工具那样复杂,但是他可以做到批量。所以相对于平面设计师而言,UI设计师更注重单调且统一。

伪元素

CSS的伪元素主要用于给元素添加一些特殊的效果。这里我们主要介绍::after(在元素之后插入效果)和::before(在元素之前插入效果)。其他伪元素大家以后可以阅读文档来学习。

技术文档:伪元素

CSS的::before与content

CSS的渐变Gradient

颜色渐变是设计师必不可少的,CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

技术文档:CSS 渐变属性linear-gradient

使用VS Code新建一个gradient.html,然后使用emmet语法快速搭建html的骨架,并把下面的代码输入到body标签之间,保存后使用Chrome浏览器打开gradient.html,查看效果:

我们发现因为背景图片使用了linear-gradient属性,它默认的渐变方向是从上到下,第一个颜色(这里为红色red)是起始颜色,第二个颜色(这里为蓝色blue)为停止颜色。

将.gradient-display里的backgound-image的值依次换成以下:

改变渐变的方向

方向

增加更多颜色变换

颜色百分比

细微渐变增强设计感

https://marksheet.io/css-gradients.html

查阅文档,通过文档来学习是技术进阶的重要手段。技术书与视频里面内容往往很陈旧,知识也无法面面俱到,尤其是在css方面,甚至一些专职的前端开发人员,有很多属性都不知道,比如遮罩属性、生成内容属性这些知识很少有书籍、视频会涉及到,导致很多人学习的知识是残缺的。要成为资深开发工程师,一定要学会阅读专业的技术文档,CSS更多属性可以阅读MDN CSS参考

http://overapi.com/css

本节任务