ホームページ > 記事 > ウェブフロントエンド > 「CSS3 実戦」メモ ～グラデーションデザイン(1)～
「CSS3 実戦」メモ ～グラデーションデザイン(1)～
- 高洛峰オリジナル
- 2016-12-20 14:49:461435ブラウズ
画像グラデーションと比較した場合、CSS ベースのグラデーションの最大の利点は、変更が簡単で、無段階のスケーリングをサポートしているため、トランジションがより自然になることです。現在、CSS グラデーションを実装できるのは、Webkit および Gecko エンジンをベースとしたブラウザのみです。Presto エンジンをベースとした Opera ブラウザは、現時点ではグラデーションをサポートしていませんが、Trident ベースの IE はフィルタを通じてグラデーションを実現できますが、これはお勧めできません。
Webkit エンジン用の CSS グラデーション デザイン (Safari 4 以降)
基本構文:
-webkit-gradient(
パラメータの説明:
線形グラデーションの基本的な使用法:
/*単純な線形グラデーションの背景色、上から下へ、青から赤へのグラデーション表示*/background: -webkit-gradient(linear, left top, leftbottom, from(blue ) , to(red));
デモ効果:
/*上から中、中から下、青から緑、赤のグラデーション表示*/背景: -webkit -gradient (リニア、左上、左下、from(青)、to(赤)、カラーストップ(50%、緑));
デモ効果:
/*デザイン二重グラデーション、上から下へ、最初は青から白、次に黒から赤 */background: -webkit-gradient(linear, 左上, 左下, from(青), to(赤),color -stop(0.5, #fff) 、color-stop(0.5, #000));
デモ効果:
/*上から順に異なるステップ値を設定して複数のグラデーション効果をデザインします。最初にグラデーションは青から始まります。白に、次に百色から黒に、そして最後に黒から赤に。 */background: -webkit-gradient(linear, 左上, 左下, from(青), to( 赤),color-stop(0.4, # fff), color-stop(0.6, #000));
デモ効果:
概要: color-stop() 関数には 2 つのパラメーター値が含まれています。最初のパラメーター値はコーナー マークの位置を指定します。 2 番目のパラメータはカラーマークの色を指定します。グラデーションには複数のカラー ストップを含めることができます。位置の値は 0 ～ 1 の間の 10 進数、または 0 ～ 100% のパーセンテージで、カラー ストップの位置比率を指定します。
放射状グラデーションの基本的な使い方
/* 同心円（中心座標は200、100）、内円の半径は10、外円の半径は100、内円は外円の半径より小さく、内円の赤から外円へ緑色の放射状グラデーション。外側の円の半径は緑色で表示され、内側の円は赤色で表示されます*/背景: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green) ));
効果表示:
/* 同心円 (中心座標は 200、100)、内円の半径は 100、外円の半径は 100、内円は外円の半径より小さい、から内円の赤から外円の緑への放射状グラデーション。内側の円と外側の円の半径が等しい場合、グラデーションは無効となります*/background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));
デモ効果:
/* 同心円(中心座標は200、100)、内側の円の半径は100、外側の円の半径は10、内側の円は外側の円の半径より大きい、内側からの放射状の勾配赤の円から外の円は緑、内円の半径を超えると赤、外の円は緑で表示*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red) ), to(green));
デモ効果:
/*非同心円の場合、内側の円の中心と外側の円の中心の間の距離が2つの円の半径の差より小さい場合、上記の効果が表示されます。先細りの放射状グラデーション効果を示しています。円錐の鮮明さは、2 つの円*/背景の中心間の距離に比例します: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));
デモ効果:
/*同心円、内円から外円までの90%の位置、つまり外輪からの距離以内に青色のカラーマークを追加し、下の図に示すように、多層放射状グラデーション。 */background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));
デモ効果:
/*to() 関数のカラー値を透明に設定することで、発散円形効果をデザインできます*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from (red) , to(rgba(1,159,98,0)));
デモ効果:
/*to() 関数の色の値を透明に設定し、類似した色をデザインすると、球面効果をデザインできます* /background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%) , #0CF));
デモ効果:
/*以下に示すように、背景画像に複数の放射状グラデーションを定義することで、複数のバブル効果をデザインできます*/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: パディングボックス; -webkit-background-clip: content -box;
デモ効果:
グラデーション アプリケーションはグラデーション効果の境界線を定義します
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
border-width: 20px;
width: 400px;
height: 200px;
margin: 20px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
デモ効果:
コンテンツの塗りつぶし効果を定義する
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
width:400px;
height:200px;
border:10px solid #A7D30C;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
float:left;
}
.div1::before {
width:400px;
height:200px;
border:10px solid #019F62;
content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
display: block;
}
</style>
</head>
<body>
<div class="div1">透视框</div>
</body>
</html>
表示効果:
リストアイコンの定義
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>
<body>
<ul>
<li>新闻列表项1</li>
<li>新闻列表项2</li>
<li>新闻列表项3</li>
<li>新闻列表项4</li>
</ul>
</body>
</html>
デモ効果:
その他の「CSS3 実践」ノート - グラデーション デザイン ( 1) 関連記事をご覧ください PHP 中国語 Web サイトをフォローしてください!