1. TOP
  2. HTML / CSS Web
  3. [CSS] CSS3で線形グラデーションメモ

[CSS] CSS3で線形グラデーションメモ

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

説明とか

難しい説明は抜きにして、CSSのlinear-gradient() などのグラデーションに関する記述は基本的に画像扱いです。

なのでbackgroundプロパティの場合は、background-sizeなどで縮尺したりも出来たような気がします。またcss3ではbackgroundプロパティに複数画像が設定できたはずなので、今までどおりのurl(画像パス)とあわせてグラデーションの上に透過画像を配置したりすることも出来たり出来なかったりします。詳しくは調べてください。後で書きます。

linear-gradient(角度, 色 位置(0%), 色 位置(10%), ・・・, 色 位置(100%));

みたいな感じです。ブラウザによって複数書かなければなりません。それが以下です。

サンプルコード

いつも使ってる感じがコレ

/*いっそひとおもいに*/
background-color: #666;
/* old Chrome 3-9 / old Safari 4.0-5.0*/
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(0.50, #666), color-stop(1.00, #000));
/* For Chrome and Safari */
background-image: -webkit-linear-gradient(top, #fff 0%, #999 50%, #000 100%);
/* For old Fx (3.6 to 15) */
background-image:    -moz-linear-gradient(top, #fff 0%, #999 50%, #000 100%);
/* For pre-releases of IE 10*/
background-image:     -ms-linear-gradient(top, #fff 0%, #999 50%, #000 100%);
/* For old Opera (11.1 to 12.0) */ 
background-image:      -o-linear-gradient(top, #fff 0%, #999 50%, #000 100%);
/* Standard syntax; must be last */
background-image:         linear-gradient(top bottom, #fff 0%, #999 50%, #000 100%);

Mozilla Developer Network的にはコレ

/*MDN*/
/* グラデーションをサポートしていないブラウザの為に */
background-color: #F07575;
/* For Chrome and Safari */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
/* For old Fx (3.6 to 15) */
background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
/* For pre-releases of IE 10*/
background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
/* For old Opera (11.1 to 12.0) */ 
background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
/* Standard syntax; must be last */
background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55);

追加で旧(レガシーな)IE達用に書きの記述を加えてみたりして

/* InternetExplorer */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=0)";  

色の指定に関して

16進数
赤だと#ff0000とか、#f00のような見慣れたいつもの
rgba(赤, 緑, 青, 透明)
赤だとrgba(255, 0, 0, 1)のようなやつ。Fireworksと相性がよさそう。
hsla(色相, 彩度, 明度, 透明)
赤だとhsla(0, 100%, 50%, 1)のようなちょっと色のイメージが出来ないやつ。photoshopと相性がよさそう。

これらでいけます。

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
基本サポート
(backgroundとbackground-image)
3.6 (1.9.2)-moz
16 (16)
10.0 (534.16)-webkit 10.0 11.10-o 5.1-webkit
<画像> を受け入れる
全プロパティでの使用
-
Legacy な webkit の構文 - 3-webkit - - 4.0-webkit
Legacyなfrom構文
(to なし)
3.6 (1.9.2)-moz  10.0 (534.16)-webkit  10.0 11.10-o 5.1-webkit
標準的な構文
(to キーワードを使用)
10(10)-moz
16 (16)
26.0 (537.27) 10.0 11.60-o
12.10
WebKit nightlies (537.27)

詳しくは参照元のMDNを見てください。

CSS の linear-gradient() 関数は、色の線形グラデーションを表す <画像> を作ります。この関数の結果は CSS の <グラデーション> データ型のオブジェクトになります。

CSS グラデーションは CSS の ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです(アスペクト比についても同様です)。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。

linear-gradient - CSS | MDN

« BMC timemachine TT 02 | ホーム | [2ch] 相手に伝わる文章力の違い »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/123
ページの先頭に戻る