《CSS3实战》--渐变设计

原创 黎云锐 教程 前端 122阅读 2018-12-20 17:27:11 举报

这篇文章主要介绍了《CSS3实战》笔记--渐变设计(一,需要的朋友可以参考下

基于CSS的渐变与图片渐变相比,最大的优点是便于修改,同时支持无级缩放,过渡更加自然。目前,实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器,基于Presto引擎的Opera浏览器暂时不支持渐变,基于Trident的IE虽然可以通过滤镜的方式实现,但并不提倡。

Webkit引擎(Safari 4及以上版本)的CSS渐变设计

基本语法:

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)</pre>

参数说明:

<type>:定义渐变类型,包括线性渐变(linear)和径向渐变(radial)。

<point>:定义渐变起始点和结束点坐标,即开始应用渐变的x轴和y轴坐标,以及结束渐变的坐标。该参数支持数值,百分比和关键字,如(0,0)或者(left,top)等。关键字包括top,bottom,left和right。

<radius>:当定义径向渐变时,用来设置径向渐变的长度,该参数为一个数值。

<stop>:定义渐变色和步长。包括三个类型值,即开始的颜色,使用from (color value)函数定义;结束的颜色,使用to(color value)函数定义:颜色步长,使用color-stop(value,color value)定义。color-stop()包含两个参数值,第一个参数值为一个数值或者百分比值,取值范围为0~1.0(或者0%~100%),第二个参数值表示任意颜色值。

直线渐变基本用法:

/*简单的线性渐变背景色,从顶部到底部,从蓝色向红色渐变显示*/** background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));</pre>

演示效果: 

/*从顶部到中间,再从中间到底部,从蓝色到绿色,再到红色渐变显示*/ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));</pre>

演示效果: 

/*设计二重渐变,从顶部到底部,先是从蓝色到白色渐变显示,再从黑色到红色渐变显示*/ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));</pre>

演示效果: 

/*通过设置不同的步长值,从而设计多重渐变效果,从顶部到底部,先是从蓝色到白色渐变,再从百色到黑色渐变,最后是从黑色到红色渐变显示*/ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));</pre>

演示效果: 

小结:color-stop()函数包含两个参数值,第一个参数值指定角标位置,第二个参数指定色标颜色。一个渐变可以包含多个色标,位置值为0~1之间的小数,或者0~100%之间的百分数,指定色标的位置比例。

径向渐变的基本用法

/*同心圆(圆心坐标为200,100),内圆半径为10,外圆半径为100,内圆小于外圆半径,从内圆红色到外圆绿色径向渐变,超过外圆半径显示为绿色,内圆显示红色*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));</pre>

效果显示: 

/*同心圆(圆心坐标为200,100),内圆半径为100,外圆半径为100,内圆小于外圆半径,从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时,则渐变无效*/ background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));</pre>

演示效果: 

/*同心圆(圆心坐标为200,100),内圆半径为100,外圆半径为10,内圆大于外圆半径,从内圆红色到外圆绿色径向渐变,超出内圆半径显示为红色,外圆显示绿色*/ background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));</pre>

演示效果: 

/*非同心圆,内圆圆心和外圆圆心的距离小于两圆半径的差,则显示上图效果,呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/ background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));</pre>

演示效果: 

/*同心圆,在内圆到外圆中间90%的位置,即距离外环内添加一个蓝色色标,设计多层径向渐变,如下图所示。*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));</pre>

演示效果: 

/*通过设置to()函数的颜色值为透明,可以设计发散的圆形效果*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));</pre>

演示效果: 

/*通过设置to()函数的颜色值为透明,同时设计相似色,可以设计球形效果*/ background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));</pre>

演示效果: 

/*通过为背景图定义多个径向渐变,可以设计多个气泡效果,如下图所示*/ background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;</pre>

演示效果: 

渐变应用定义渐变效果的边框

代码:

演示效果: 

定义填充内容效果

代码:

显示效果: 

定义列表图标

演示效果: 

Gecko引擎的CSS渐变设计直线渐变基本语法

参数说明:

<point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right 关键字定义 x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标。当指定一个值时,另一个值默认为 center 。

<angle>:定义直线渐变的角度。单位包括deg,grad(梯度,90度 = 100grad),rad (弧度,一圈等于2*PI rad)。

<stop>:定义步长,用法与Webkit引擎的color-stop()函数相似,但是该参数不需要调用函数,直接传递函数即可。其中第一个参数设置颜色,可以为任何合法的颜色值,第二个值设置颜色的位置,取值为百分比(0~100%)或者数值,也可以省略步长设置。

直线渐变的基本用法

/*最简单的线性渐变,只需要指定开始颜色和结束颜色,则默认从上到下实施线性渐变*/ background: -moz-linear-gradient(red, blue);</pre>

演示效果: 

/*从左上角到右下角的渐变,其中top关键字设置起点的x轴,left关键字设置起点的y轴坐标*/ background: -moz-linear-gradient(top left,red, blue)</pre>

演示效果: 

/*设置从左到右的五彩渐变,其中y轴坐标默认为center,多个色标按步长平均显示*/ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);</pre>

演示效果: 

/*从左上角到右下角的红色渐变,其中红色逐渐减弱,并最终显示为透明*/ background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));</pre>

演示效果: 

/*设置角度值*/ background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));</pre>

演示效果: 

小结:当指定角度时,是沿水平线按逆时针旋转定位的。因此,设置0deg,将产生从左向右的水平渐变,而设置90度,将创建一个从底部到顶部的渐变。

`/从上到下的多彩渐变,其中在y轴的80%的位置,添加一个绿色色标,设计三色渐变效果。如果没有指定位置则三色会均匀分布*/**background: -moz-linear-gradient(top, blue, green 80%, orange);`</pre>

演示效果: 

/*设计渐变半透明的效果的背景图片,在背景图片上面覆盖一层从左到右为白色到透明的渐变填充层*/ background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);</pre>

演示效果: 

径向渐变的基本语法

该函数的参数说明:

<point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right关键字定义x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标。当指定一个值时,则另一个值默认为center。

<angle>:定义直线渐变的角度。单位包括deg,grad(梯度,90度 = 100grad),rad (弧度,一圈等于2*PI rad)。

<stop>:定义步长,用法与Webkit引擎的color-stop()函数相似,但是该参数不需要调用函数,直接传递函数即可。其中第一个参数设置颜色,可以为任何合法的颜色值,第二个值设置颜色的位置,取值为百分比(0~100%)或者数值,也可以省略步长设置。

:定义圆半径,或者椭圆的轴长度n

径向渐变的基本语法

/*最简单的径向渐变,从中间向外由红色,黄色到蓝色渐变显示*/ background: -moz-radial-gradient(red, yellow, blue);</pre>

演示效果: 

/*最简单的径向渐变,从中间向外由红色,黄色道蓝色渐变显示,并设置不同色标的显示位置*/ background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);</pre>

演示效果: 

/*径向渐变,从左下角向外由红色,黄色,蓝色渐变显示,并设置蓝色色标的显示位置*/ background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);</pre>

显示效果: 

/*径向渐变,形状为圆形。从左侧中间向外由红色,黄色到蓝色渐变显示,并设置蓝色色标的显示位置*/ background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);</pre>

演示效果: 

/*径向渐变,形状为椭圆。从中间向外由红色,黄色到蓝色渐变显示,并设置渐变尺寸为cover关键字*/ background: -moz-radial-gradient(ellipse cover, red, yellow, blue);</pre>

演示效果: 

小结: 
size参数包含多个关键字,closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。

另外,Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性,用来定义重复直线渐变和重复径向渐变。

演示效果: 

background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);

演示效果: 

渐变的应用

IE浏览器引擎的CSS渐变实现方法

IE并不支持CSS渐变,但是提供了渐变滤镜,可以用来实现简单的渐变效果。

基本语法

该参数的参数说明如下:

enabled:设置或检索滤镜是否激活。可选布尔值,包括 true 和 false,默认值为 true ,表示激活状态。

startColor :设置或检索色彩渐变的开始颜色和透明度。可选项,其格式为#AARRGGBB。AA,RR,GG,BB为十六进制正整数,取值范围为00~FF。RR指定红色值,GG指定绿色值,BB指定蓝色值,AA指定透明度,00是完全透明,FF是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为#FF0000~#FFFFFF,默认值为#FF0000FF,即不透明蓝色。

EndColorStr : 设置或检索色彩渐变的结束颜色和透明度。默认值为#FF000000,即不透明黑色。

IE 渐变滤镜实战应用

利用IE滤镜设计渐变背景,然后通过背景图像设计图文插画效果。

代码

本次给大家推荐一个交流圈,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入:582735936,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复