<< 2014年03月 | TOP | 2014年05月 >>

2014年04月10日

linear-gradient()関数 css3

スポンサード　リンク

 CSS3 linear-gradient() 関数は、色の線形グラデーションを生成します。

このサンプルは色が「上から下」 へ と「左から右」へ と色が替わっていく
最も簡単な線形グラデーションです。

赤紫　黄　緑

赤紫　黄　緑

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>css3 linear-gradient()関数</title>
<style type="text/css">
.gradBox{ /* 線形グラデーション描画ボックス */
   text-align: center;line-height: 100px;/*文字中央配置 無くても可*/
   width:500px; 
   height:100px;
        }
div#gradBox1{ /* 上から下へ 垂直線形グラデーション（赤紫 黄 緑）*/
   background :-webkit-linear-gradient(top,fuchsia,yellow,green);/* Chrome,Safari*/
   background :   -moz-linear-gradient(top,fuchsia,yellow,green);/* Firefox */
   background :     -o-linear-gradient(top,fuchsia,yellow,green);/* Opera */
   background:         linear-gradient(to bottom,fuchsia,yellow,green);/* 標準 */
    }
div#gradBox2{ /* 左から右へ 水平線形グラデーション（赤紫 黄 緑）*/
   background : -webkit-linear-gradient(left,fuchsia,yellow,green);
   background :    -moz-linear-gradient(left,fuchsia,yellow,green);
   background :      -o-linear-gradient(left,fuchsia,yellow,green);
   background:          linear-gradient(to right,fuchsia,yellow,green);
    }
 </style>
</head>
<body>
   <div id="gradBox1" class="gradBox">赤紫　黄　緑</div>
     <br />
   <div id="gradBox2" class="gradBox">赤紫　黄　緑</div>
</body>
</html>
対応ブラウザ
vendor-prefix  ブラウザ
-moz- Firefox3.6〜
-webkit- Chrome10〜, Safari5〜
-o- Opera11〜
-ms- For pre-releases of IE10
vendor-prefix
無し 		IE10〜,Chrome26〜, Firefox16〜
Safari6.1〜, Opera12.1〜
linear-gradient()関数、 構文
この関数はbackground-imageプロパティと、background プロパティの値としてのみ、設定可能です。
background:linear-gradient(方向｜角度 ,開始色 位置,中間色 位置,終了色 位置)
└ カラーストップ
方向キーワード　　'top 、bottom 、left 、right'
プレフィックス有り、レガシーな構文
-prefix-linear-gradient		 プレフィックス無し、標準構文
linear-gradient
キーワード は開始点を指定。
例えば'top'なら上を基点として下に
'right bottom' なら右下角から開始して左上
角に向かうグラデーションになります。		 キーワードの前に'to'を置き、方向を指定
'to left top'ならボックスの中心点を通って、
左上方向へと向かうグラデーションになります。
詳細はIE10 CSS3 グラデーション で
  • -prefix-linear-gradient(
    right bottom, red,yellow,green)
  • linear-gradient(
    to left top, red,yellow,green)
 グラデーション線の向きが違います。かなりややこしいのでlinear-gradient -- CSS | MDNを
角度の方向
0deg は右に向かうグラデーション線です。
角度は反時計回りに大きくなります。
キーワード top,right,bottom,left は
角度 270deg,180deg,90deg,0deg になります。
  ↑
 90deg

← 180deg    0deg  →

270deg
↓
 0deg は上に向かうグラデーション線です。
角度は時計回りに大きくなります。
値 to top,to right,to bottom,to left は
角度 0deg,90deg,180deg,270deg になります。
 ↑
 0deg

← 270deg   90deg  →

180deg
↓
  •  -prefix-linear-gradient(
    90deg, cyan,red)
  • linear-gradient(
    90deg, cyan,red)
方向キーワードや角度を省略すると、どちらの構文でも、上から下へのグラデーション線になります。
カラーストップ ( 色 , 位置 )
 開始色と終了色は必須です。そしてこの間にカラーストップを追加してグラデーションの
中間色を指定することができます。
  • -prefix-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  • linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
レインボー カラー
規定値では色は均等に配分されますが、位置を指定することによって変更することができます。
新旧構文とも書式は同じです。
位置は省略することができます。（開始色 0% , 終了色 100%）これがデフォルトです。
デフォルト：中間色 #ff0 が50% の位置に
linear-gradient(#0f0,#ff0,#00f);
中間色 #ff0：30% の地点に変更
 linear-gradient(#0f0,#ff0 30%,#00f);
位置の指定の仕方によっては グラデーションさせずに配色することが可能です。
  • -prefix-linear-gradient(
    65deg,aqua 50%,pink 50%);
  • linear-gradient(
    25deg,aqua 50%,pink 50%);
  • -prefix-linear-gradient(0deg,green
    34%,yellow 34%,yellow 68%,red 68%);
  • linear-gradient(90deg,green
    34%,yellow 34%,yellow 68%,red 68%);
タグ：linear-gradient
posted by javaScript at 20:26 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。