CSS3 放射状グラデーション (radial-gradient)_html/css_WEB-ITnose

前回の記事ではCSS3の線形グラデーション(linear-gradient)を紹介しましたが、今回はradial-gradient(放射状グラデーション)と繰り返しグラデーション(linearrepeat、radialrepeat)を紹介します。以前は、グラデーション効果、影、角丸効果はすべて画像として作成されていましたが、CSS3 では CSS コードを記述することで直接実装できるようになりました。

CSS3 放射状グラデーションと線形グラデーションは非常に似ています。まず構文を見てみましょう:

-moz-radial-gradient([ || ,] [,? ;]*);

2. 線形グラデーションで既に表示されている開始位置、方向、色に加えて、放射状グラデーションでは、グラデーションの形状 (円または楕円) とサイズ (最も近い) を指定できます。側面、最も近いコーナー、最も遠い側、最も遠いコーナー、包含またはカバー）。 カラーストップ: 線形グラデーションの場合と同様に、グラデーション ラインに沿ってグラデーションの開始色と終了色を定義する必要があります。 CSS3 放射状グラデーションの具体的な使用法をよりよく理解するために、主にさまざまな例を通じて CSS3 放射状グラデーションの具体的な使用法を比較します。最もよく使用される UI フロントエンド フレームワークを共有します。

例 1:

.Code

背景: -moz-radial-gradient(#ace, #f96, #1E90FF);

背景: -webkit-radial-gradient( #ace, #f96, #1E90FF);

背景: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
背景: -webkit-radial-gradient(#ace 5%) , #f96 25%, #1E90FF 50%);

上の 2 つの例のコードから、同じアイデアで始まり、終わることがわかりました。しかし、2 番目の例では、なぜこれほど大きな違いがあるのでしょうか?実際、放射状グラデーションの開始色と終了色は同じですが、位置が設定されていない場合、デフォルトの色は等間隔になります。これは前の線形グラデーションと同じですが、グラデーションの位置が設定されている場合はそれに続きます。グラデーションの位置。これが例 1 との違いです。円の開始色と終了色は同じですが、例 1 ではデフォルトの色が等間隔のグラデーションですが、例 2 では各色が特定の位置を持っています。 。最高の UI フロントエンド フレームワークの 1 つを共有してください。

例 3:

.Code

背景: -moz-radial-gradient(bottom left, Circle, #ace, #f96, #1E90FF);

背景: -webkit-radial- gradient(bottom left, Circle, #ace, #f96, #1E90FF);

例 4:

.コード

背景: - moz-radial-gradient(左下, 楕円, #ace, #f96, #1E90FF);

背景: -webkit-radial-gradient(左下, 楕円, #f96, #1E90FF);

効果は次のとおりです:
例 3 と例 4 の効果から、それらの形状が異なることがわかります。例は 3 方向の円で、例は 4 方向の円です。 -way楕円形、つまり形状の違いが存在します。ただし、2 つの例のコードに戻ると、例 3 では形状が円に設定されており、例 4 では楕円、つまり放射状のグラデーションで形状を設定できることは明らかです。

例 5:

.Code

1. 背景: -moz-radial-gradient(楕円の最も近い側, #ace, #f96 10%, #1E90FF 50%, #f96);
2. 背景: -webkit-radial-gradient(楕円の最も近い側, # ace、#f96 10%、#1E90FF 50%、#f96);

効果は次のとおりです:

例 6:

.code

1. 背景: -moz -radial-gradient(楕円の一番遠いコーナー, #ace, #f96 10%, #1E90FF 50%, #f96);
2. 背景: -webkit-radial-gradient(楕円の一番遠いコーナー, #ace, # f96 10% , #1E90FF 50%, #f96);

例 5 と例 6 のコードから、例 5 では次のことが明確にわかります。私は最も近い側を使用しました。例 6 では、最も遠いコーナーを適用しました。このようにして、放射状グラデーションではサイズ (Size) も設定できることがわかります。サイズのさまざまなオプション (最も近い側、最も近いコーナー、最も遠い側、最も遠いコーナー、包含またはカバー) は、円または楕円のサイズの点を定義するために使用されます。 例: 楕円の手前側と奥側の角 以下の 2 つの楕円はサイズが異なります。例 5 は始点 (中心) から近端までの距離で設定され、例 6 は始点 (中心) から遠隅までの距離で設定されています。最高の UI フロントエンド フレームワークの 1 つを共有してください。

背景: -webkit-radial-gradient(circle Closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

効果は次のとおりです。

例 8:

効果は次のとおりです:

例 7 と 8 は主に円の手前側 VS 奥側を示しています。例 7 の円のグラデーション サイズは次のように決定されます。始点（中心）から手前側までの距離、例の8の円は始点から奥側までの距離で決まります。

例 9:

.Code

背景: -moz-radial-gradient(#ace, #f96, #1E90FF);

背景: -webkit-radial-gradient( #ace, #f96、#1E90FF);

例 10:

。 背景: -moz-radial-gradient(contain, # ace, # f96, #1E90FF);

1. 背景: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF); 効果は次のとおりです。
例 9 と例 10 のデモンストレーションには円が含まれています。ここでは、例 9 のデフォルトの円、同じもののグラデーション バージョンですが、例 10 の円で囲まれていることがわかります。最高の UI フロントエンド フレームワークの 1 つを共有してください。
最後に、2 つの例を見ていきます。1 つは、以下に示すように、中央配置とフルサイズのアプリケーションです。 コード

/* Firefox 3.6+ */

背景: -moz- radius-gradient(circle, #ace, #f96);

/* Safari 4-5、Chrome 1-9 */

/* サイズを指定できません */

背景: -webkit -gradient (radial, center center, 0, center center, 460, from(#ace), to(#f96));

/* Safari 5.1 以降、Chrome 10 以降 */

背景: -webkit-radial- gradient(circle, #ace, #f96);

効果は次のとおりです:

以下の例では、Positioned、Sized を使用しています。コードと効果を参照してください:

。

1. /* Firefox 3.6+ */
2. /* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */
3. 背景: -moz-radial-gradient (80% 20%, 最近接コーナー, #ace, #f96);
4. /* Safari 4-5、Chrome 1-9 */
5. 背景: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96));
6. /* Safari 5.1 以降、Chrome 10 以降 */
7. 背景: -webkit-radial-gradient(80% 20%、最も近い-corner, #ace, #f96);

効果は次のとおりです:

これまで、CSS3 の 2 つのグラデーション メソッドを紹介しました。もう少し時間をかけて、CSS3 繰り返しグラデーションの適用を見てみましょう。

グラデーションを繰り返したい場合は、-moz-repeat-linear-gradient (繰り返しの線形グラデーション) と -moz-repeat-radial-gradient (繰り返しの放射状グラデーション) を使用できます。 以下の例では、各インスタンスに 2 つの開始色と終了色が指定され、無限に繰り返されます。最高の UI フロントエンド フレームワークの 1 つを共有してください。

コード

背景: -moz-Reperation-Radial-Gradient (#ACE, #ACE 5PX,#F96 5px,#F96 10px); #f96 10px);

背景: -moz-repeat-linear-gradient(左上 -45deg, #ace, #ace 5px, #f96 5px, #f96 10px); gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
CSS3 のグラデーションについて これを読むと、誰もが必ず思うでしょう。主な用途は何ですか?これについてはいろいろありますが、最も簡単なのは背景を作成することです。これを使用して美しいボタンを作成することもできます。パターンを作成するためのいくつかのサンプル コードをここに示します。
HTML コード:

.Code

gradient ＆lt; li＆gt;＆lt;

1. ul {
2. オーバーフロー: 非表示;  
3. margin-top: 20px;  
4. }
5. li{
6. 幅: 150px;  
7. 高さ: 80ピクセル;  
8. margin-bottom: 10px;  
9. フロート: 左;  
10. margin-right: 5px;  
11. 背景: #ace;  
12. /*サイズを制御します*/
13. -webkit-background-size: 20px 20px;  
14. -moz-background-size: 20px 20px;  
15. 背景サイズ: 20ピクセル 20ピクセル;  
16. }
18. li.gradient1 {
19. background-image: -webkit-gradient(
20. linear,
21. 0 100%, 100% 0,
22. カラーストップ(.25, rgba(255, 255 , 255, .2)),
23. color-stop(.25, transparent),
24. color-stop(.5, transparent),
25. color-stop(.5, rgba(255, 255, 255, . 2))、
26. color-stop(.75, rgba(255, 255, 255, .2)),
27. color-stop(.75, 透明),
28. to(透明)
29. );  
30. background-image: -moz-linear-gradient(
31. 45deg,
32. rgba(255, 255, 255, .2) 25%,
transparent 25%,
透明 50%、
rgba(255 、255、255、.2）50％、
35. rgba（255、255、255、.2）75％、
36. 透明75％、
37. 透明
）;  
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
透明 50%、
rgba(255 , 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
透明 75%,
透明
);  
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
透明 50%、
gba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
透明 75%,
透明
);  
}  
60. li.gradient2 {
61. background-image: -webkit-gradient(linear, 0 0, 100% 100%,
62. color-stop (.25, rgba(255, 255, 255, .2)) 、color-stop(.25, transparent),
63. color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
64. color-stop(. 75, rgba(255, 255, 255, .2)), color-stop(.75, 透明),
65. to(透明));  
66. background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,
67. 透明 50%, rgba(255, 255, 255, .2) ) 50%, rgba(255, 255, 255, .2) 75%,
68. 透明 75%, 透明);  
69. background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,
70. 透明 50%, rgba(255, 255, 255, .2) ) 50%, rgba(255, 255, 255, .2) 75%,
71. 透明 75%, 透明);  
72. 背景画像: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,
73. 透明 50%, rgba(255, 255, 255, .2) 50% , rgba(255, 255, 255, .2) 75%,
74. 透明 75%, 透明);  
75. }
77. li.gradient3 {
78. background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)) , color-stop(.5, 透明), to(透明));  
79. background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
80. background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
81. background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
82. }
84. li.gradient4 {
85. background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)) , color-stop(.5, 透明), to(透明));  
86. background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
87. background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
88. background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
89. }  
li.gradient5 {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color -stop(.25、透明)、 to(透明)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100 %, 100% 0, カラーストップ(.75, 透明), カラーストップ(.75, #555));  
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent) ,
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);  
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent) ,
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);  
背景画像: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-グラデーション(45 度、透明 75%、#555 75%)、
線形グラデーション(-45 度、透明 75%、#555 75%);  
}
li.gradient6 {
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5,透明)、カラーストップ(.5、rgba( 200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5,透明)、カラーストップ(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5));  
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear -gradient(0deg, 透明 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-o-linear -gradient(0deg, 透明 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
linear-gradient(0deg, transparent) 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
}
效果：分享一个最好用UIフロントエンド框架！さらに多くの異なる効果を制作します。