应用视觉设计
视觉设计结合了排版、色彩理论、图形、动画、页面布局等,以表达独特的信息。
一、box-shadow
box-shadow 属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius 和颜色值。 其中 blur-radius和 spread-radius是可选的。
二、颜色
1、RGB和分裂补色
电脑显示器和各类屏幕都是基于颜色叠加的模型:将红(R)、绿(G)、蓝(B)三原色的色光以不同的比例相加,就可以产生各种色彩光。 这在现代色彩理论中叫三原色光模式(RGB Color Model)。 红色(R)、绿色(G)和蓝色(B)叫作三原色。 如果把两种原色相加,就可以产生二次色:蓝绿(G+B)、品红(R+B)和黄色(R+G), 我们在上一个挑战里已经见过这些颜色了。 这些二次色恰好是在合成它们时未使用的原色的补色,即在色环中位于两端。 例如,品红色是红色和蓝色相加产生,它是绿色的补色。
三次色是由原色和二次色相加产生的颜色, 例如,在 RGB 颜色模型中,红色(原色)和黄色(二次色)相加产生橙色(三次色)。 将这六种颜色中相邻的颜色相加,便产生了十二色色环。
设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后,在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比,又不失和谐。
下面是使用分裂补色搭配法创建的三个颜色:
颜色 | HEX 颜色码 |
---|---|
橙色 | #FF7F00 |
蓝绿色 | #00FFFF |
树莓红 | #FF007F |
补色搭配能形成强列的对比效果,让内容更富生机。 但是如果使用不当效果会适得其反:比如将文字背景色和文字颜色设置为互补色,这样文字会很难看清。 通常的做法是,一种颜色做为主要颜色,然后使用其补色用来装点那些需要用户特别注意的部分。
2、HSL
颜色具有多种特性,包括色相、饱和度和亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。
色相是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。 以颜色光谱为例,光谱左边从红色开始,移动到中间的绿色,一直到右边的蓝色,色相值就是沿着这条线的取值。 在 hsl()里面,色相用色环来代替光谱,色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
饱和度是指色彩的纯度,也就是颜色里灰色的占比。 饱和度越高则灰色占比越少,色彩也就越纯;反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。
亮度决定颜色的明暗程度,也就是颜色里白色或者黑色的占比。 其中,100% 的亮度表示纯白色, 0% 的亮度则表示纯黑色;而 50% 的亮度就表示在色相中选取的颜色。
hsl()使 CSS 更改颜色色调更加方便。 比如,给一个纯色添加白色可以调出更浅的色调;添加黑色可以创造更深的色调。 另外,还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。 回忆下 hsl() 里面的 s和 l 分辨代表饱和度和亮度。 饱和度代表灰色的占比,亮度代表白色和黑色的占比。 这在你想获取一个基准色的变种的情景下会十分有用。
所有元素的默认 background-color都是 transparent
3、线性渐变
linear-gradient()
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了颜色过渡的方向——它的值是角度,90deg表示垂直渐变(从左到右),45deg表示沿对角线渐变(从左下方到右上方)。 其他参数指定了渐变颜色的顺序。
例如:
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
repeating-linear-gradient()
和 linear-gradient()很像,主要区别是会重复指定的渐变
background: repeating-linear-gradient(90deg, yellow 0px, blue 40px, green 40px, red 80px);
渐变开始于 0 像素位置的 yellow,然后过渡到距离开始位置 40 像素的 blue。 由于下一个渐变颜色的起始位置也是 40 像素,所以颜色直接渐变成第三个颜色值 green,然后过渡到距离开始位置 80 像素的 red。
background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);
产生黄黑渐变:
三、transform属性
1、scale()
CSS 属性 transform里面的 scale()
函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍:
p {
transform: scale(2);
}
transform属性有很多函数可以调用,可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态(如 :hover),我们可以通过 transform属性非常方便地给元素添加交互。如:
p:hover {
transform: scale(2);
}
2、skex()
skewX():使选择的元素沿着 X 轴(横向)翻转指定的角度。
下面的代码沿着 X 轴翻转段落元素24度。
p {
transform: skewX(24deg);
}
翻转前:
翻转后:
skewY():使选择的元素沿着 Y 轴(纵向)翻转指定的角度。
3、rotate()
下面的代码图形原地旋转24度。
p {
transform: rotate(24deg);
}
四、animation
animation 属性控制动画的外观,@keyframes 规则控制动画中各阶段的变化。
1、animation
(1)animation-name用来设置动画的名称,也就是要在@keyframes
里用到的名称。
(2)animation-duration设置动画所花费的时间。
(3)animation-fill-mode规定动画在播放之前或之后,其动画效果是否可见。
值 | 描述 |
---|---|
none | 不改变默认行为。 |
forwards | 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 |
backwards | 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 |
(4)animation-iteration-count控制动画循环的次数。如果想让动画一直运行,可以把值设置成 infinite。
(5)animation-timing-function用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。
有一些预定义的关键字可用于常见的选项:
默认值是 ease
,动画以低速开始,然后加快,在结束前变慢。其它常用的值包括 ease-out
:动画以高速开始,以低速结束;ease-in
,动画以低速开始,以高速结束;linear
:动画从头到尾的速度是相同的。
选学内容:cubic-bezier()函数,即贝塞尔曲线,可以更细致地控制动画的速度曲线。
2、@keyframes
@keyframes可以通过设置特定时间点的行为来创建动画。 为此,我们只需要给持续时间内的特定帧(从 0% 到 100%)加上 CSS 规则。 如果用一部电影来做类比,那么 CSS 里面的0%关键帧就像是电影里面的开场镜头;100%关键帧就像是电影里的片尾,就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内,CSS 会根据关键帧的规则来给元素添加动画效果。100%关键帧的 CSS 属性就是元素最后的样子。
3、示例分析
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
id 为 anim的元素,我们在代码中将它的 animation-name设置为 colorful,同时设置 animation-duration为 3 秒。 然后我们把 @keyframes规则添加到名为 colorful 的动画属性上。 在动画开始时(0%)的背景颜色