「CSS3実戦」ノート グラデーションデザイン(2)_html/css_WEB-ITnose

本「CSS3 Practical Combat」を読んで勉強することによる要約
「CSS3 Practical Combat」/Cheng Lin. - 北京機械工業新聞 2011.5

Gecko エンジンの CSS グラデーション設計

線形グラデーションの基本構文

-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)

パラメータの説明:

: 値には数値とパーセントが含まれます。キーワードを使用することもできます。ここで、左、中央、右のキーワードは X 軸の座標を定義します。および上部、中央、下部のキーワード定義の y 軸座標。一方の値が指定されると、もう一方の値はデフォルトで center になります。

<角度>: 線形グラデーションの角度を定義します。単位には、deg、grad (勾配、90 度 = 100grad)、rad (ラジアン、1 つの円は 2*PI rad に等しい) が含まれます。

: ステップ サイズを定義します。使用法は Webkit エンジンの color-stop() 関数と似ていますが、このパラメータは関数を呼び出す必要はなく、関数を直接渡すだけです。最初のパラメータは色を設定します。2 番目の値は、色の位置をパーセント (0 ～ 100%) で設定します。ステップ設定は省略することもできます。

線形グラデーションの基本的な使い方

/*最简单的线性渐变，只需要指定开始颜色和结束颜色，则默认从上到下实施线性渐变*/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));

mo 効果:

概要: いつ角度を指定する場合は、水平線に沿って反時計回りに配置されます。したがって、0 度に設定すると左から右への水平グラデーションが作成され、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([<position> || <angle>,]?[shape] || <size>,]? <syop>,<stop>[,<stop>]*)

この関数のパラメーターの説明:

: グラデーションの開始点、値を定義します。数値を含むvalue とpercentage のほかに、キーワードを使用することもできます。left、center、right キーワードは x 軸座標を定義し、top、center、bottom キーワードは y 軸座標を定義します。一方の値を指定すると、もう一方の値はデフォルトで中央に設定されます。

<角度>: 線形グラデーションの角度を定義します。単位には、deg、grad (勾配、90 度 = 100grad)、rad (ラジアン、1 つの円は 2*PI rad に等しい) が含まれます。

: ステップ サイズを定義します。使用法は Webkit エンジンの color-stop() 関数と似ていますが、このパラメータは関数を呼び出す必要はなく、関数を直接渡すだけです。最初のパラメータは色を設定します。2 番目の値は、色の位置をパーセント (0 ～ 100%) で設定します。ステップ設定は省略することもできます。

: 円の半径、または楕円の軸の長さを定義します 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%);

デモ効果:

概要:

size パラメータには、最近接側、最近接コーナー、最遠側、最遠コーナー、contain および cover という複数のキーワードが含まれています。これらのキーワードを使用して、放射状グラデーションのサイズを定義します。

さらに、Gecko エンジンは 2 つの属性 -moz-repeat-linear-gradient と -moz-repeat-radial-gradient も定義します。これらは、繰り返し線形グラデーションと繰り返し放射状グラデーションを定義するために使用されます。

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

デモ効果:

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);

デモ効果: