| 2011/10.1の現時点での対応ブラウザはFirefox,safari,Chromeです。 iphoneなどのスマホは-webkit-をつけてください。 | ||||||
| グラデーションの指定はちょっとだけ厄介です。 何がやっかいかというとmozilla系ブラウザとwebkit系ブラウザで指定法が違うからです。 でも指定法自体は簡単ですよ。 | ||||||
| グラデーションには線形と円形があります。 まずは、線形グラデーションの指定です。 | ||||||
| 基本書式 | ||||||
| linear-gradient(開始位置 角度 , 開始色 位置 , 終了色 位置); | ||||||
| linearと指定してある箇所がありますよね。 これで線形グラを指定しています。 | ||||||
| 開始位置は top bottom left rightの組合せで指定します。 グラデーションの終了位置は、必ず開始位置の対象です。 指定を省略する事は可能です | ||||||
| 角度は右が0度上が90度左が180度下が270度となっています。 右から時計回りで角度が深くなっています。 | ||||||
| 色指定は先に記述する方が開始色です。 指定は開始色と終了色の記述だけでもOKです。 その場合は上から下にグラデーションします。 | ||||||
| 記述例 | ||||||
Firefox(mozilla系)の場合 | ||||||
| 記述例 | ||||||
| background: -moz-linear-gradient(top, #FF1493, #FFD700); | ||||||
| 解説 | ||||||
| 赤字でtopと記述してある値にはtop bottom left raightを指定できます。(自由に組み合わせてください） 組合せの一例を下の表で確認してください。 省略した場合は自動で上から下へグラデーションします | ||||||
| ||||||
| 緑の値は開始する色、 紫は終了の色の値です | ||||||
safari Chrome(webkit系)の場合 | ||||||
| こちらも基本的には上の方法と変わりはありません。 from()が開始色でto()が終了色です。 位置は省略できませんので注意が必要です。 位置の組合せは自由ですが、開始位置に対して終了位置は常に対象です。 例えばright bottomから始まったらleft topで終わるという具合です。 | ||||||
| 記述例 | ||||||
| background: -webkit-gradient(linear, left top, left bottom, from(#FF1493), to(#FFD700)); | ||||||
| 実行例とサンプルコード | ||||||
| ||||||
間に色を指定する方法 | ||||||
| 赤色の文字の部分が間に挟む色の指定です。 ％を変えていくつも指定できますよ。 | ||||||
Firefox(mozilla系)の場合 | ||||||
| 記述例 | ||||||
| background: -moz-linear-gradient(#0000CD, #fff 50%, #FF1493); | ||||||
safari Chrome(webkit系)の場合 | ||||||
| 記述例 | ||||||
| background: -webkit-gradient(linear, left top, left bottom, from(#0000CD), color-stop(50%,#fff), to(#FF1493)); | ||||||
| 実行例とサンプルコード | ||||||
| ||||||
|