《CSS3实战》笔记渐变设计(二)_html/css_WEB-ITnose
《CSS3实战》/成林著.—北京机械工业出版社2011.5
Gecko引擎的CSS渐变设计
直线渐变基本语法
-moz-linear-gradient([|| ,]? , [, ]*)
参数说明:
直线渐变的基本用法
/*最简单的线性渐变,只需要指定开始颜色和结束颜色,则默认从上到下实施线性渐变*/background: -moz-linear-gradient(red, blue);
演示效果:
/*从左上角到右下角的渐变,其中top关键字设置起点的x轴,left关键字设置起点的y轴坐标*/ background: -moz-linear-gradient(top left,red, blue)
演示效果:
/*设置从左到右的五彩渐变,其中y轴坐标默认为center,多个色标按步长平均显示*/background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
演示效果:
/*从左上角到右下角的红色渐变,其中红色逐渐减弱,并最终显示为透明*/background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));
演示效果:
/*设置角度值*/background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));
演示效果:
小结:当指定角度时,是沿水平线按逆时针旋转定位的。因此,设置0deg,将产生从左向右的水平渐变,而设置90度,将创建一个从底部到顶部的渐变。
/*从上到下的多彩渐变,其中在y轴的80%的位置,添加一个绿色色标,设计三色渐变效果。如果没有指定位置则三色会均匀分布*/background: -moz-linear-gradient(top, blue, green 80%, orange);
演示效果:
/*设计渐变半透明的效果的背景图片,在背景图片上面覆盖一层从左到右为白色到透明的渐变填充层*/ background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);
演示效果:
径向渐变的基本语法
-moz-radial-gradient([|| ,]?[shape] || ,]? , [, ]*)
该函数的参数说明:
:定义圆半径,或者椭圆的轴长度n
径向渐变的基本语法
/*最简单的径向渐变,从中间向外由红色,黄色到蓝色渐变显示*/background: -moz-radial-gradient(red, yellow, blue);
演示效果:
/*最简单的径向渐变,从中间向外由红色,黄色道蓝色渐变显示,并设置不同色标的显示位置*/background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);
演示效果:
/*径向渐变,从左下角向外由红色,黄色,蓝色渐变显示,并设置蓝色色标的显示位置*/background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);
显示效果:
/*径向渐变,形状为圆形。从左侧中间向外由红色,黄色到蓝色渐变显示,并设置蓝色色标的显示位置*/background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);
演示效果:
/*径向渐变,形状为椭圆。从中间向外由红色,黄色到蓝色渐变显示,并设置渐变尺寸为cover关键字*/background: -moz-radial-gradient(ellipse cover, red, yellow, blue);
演示效果:
小结:
size参数包含多个关键字,closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。
另外,Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性,用来定义重复直线渐变和重复径向渐变。
background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);
演示效果:
background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);
演示效果:
渐变的应用
Webkit引擎的应用 关于文字
我对随便哪种感觉的文字上手都很快。曾经我用一天的时间看完《第一次亲密接触》然后第二天就写出了两万多字类似的东西,把同 学吓得目瞪口呆。尽管我认为那种东西几乎没有存在的价值,时光可以轻而易举地把它淹没得不留一丝痕迹。
我把考试中得到满分的作文随便丢掉,却把老师说的毫无内涵的文章装订好放在抽屉里。我常把自己的故事写下来然后拿给同学看, 然后他们感动得一塌糊涂。
……
推荐阅读
-
《CSS3实战》笔记渐变设计(二)_html/css_WEB-ITnose
-
《CSS3实战》笔记--渐变设计(一)
-
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)_html/css_WEB-ITnose
-
《CSS3实战》笔记--渐变设计(三)
-
《CSS3实战》笔记--渐变设计(二)
-
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(2)CSS3利用图层叠加实现多背景_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(3)线性渐变_html/css_WEB-ITnose
-
《CSS3实战》笔记--渐变设计(一)
-
《CSS3实战》笔记--渐变设计(二)