グラデーションを表現する(2)

CSSでグラデーションを表現する際、
3色以上にしたり円形にしたりなど細かく設定することができます。

グラデーションに3色以上の色を使う

.gra1 {
color:#FFF;
background: -moz-linear-gradient(left,#FF0000,#00FF00 50%,#FF00FF 70%,#0000FF);/* Firefox */
background: -webkit-gradient(linear,left top,right top,
from(#FF0000),color-stop(0.5, #00FF00),color-stop(0.7, #FF00FF),to(#0000FF));/* Safari,Chrome */
}

firefoxでは色を追加したい場合、#00FF00 50%　のように色と位置(％)、
safari・choromeでは　color-stop(0.5, #00FF00)　のように指定していきます。

円形グラデーションを表現する

.gra2 {
background: -moz-radial-gradient(#0000FF 10%,#E0FFFF 75%);
background:-webkit-gradient(radial, center center, 40, center center, 100,from(#0000FF),to(#E0FFFF));
width:200px;
height:200px;
}

firefoxの場合は-moz-radial-gradient(開始位置の半径 色,終了位置の半径 色)、
safari・choromeでは-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径,from(開始位置の色),to(#終了色の色));　
というように指定していきます。
※円形グラデーションに関してはfirefoxとsafari・chorome系とでは解釈の違いがあるようなので、同じように表現するには入れる値の調整が必要です。

グラデーションに透明度を設定する

.gra4 p{
background: -moz-linear-gradient(top, rgba(0,0,255,0.5),#00CCFF);
background: -webkit-gradient(linear, left top, left bottom,from(rgba(0,0,255,0.5)),to(#00CCFF));
}

色の指定にRGBaを指定することでグラデーションに透明度をつけることができます。
例では分かりやすいように背景に画像、
その上にCSSで透明度のあるグラデーションをかけました。
透明度の設定は　rgba(0,0,255,0.5)　のように、
青の部分でRGBの値、赤の部分で透明度(0~1.0)と指定していきます。

コメントを投稿する