CSSテックラボ

CSS3とCompassでグラデーション

2016年6月1日

今回はCSSを使って背景にグラデーションを指定する方法を紹介します。
主に指定するプロパティは background-image で、グラデーション用として用意された関数は線形グラデーション用の linear-gradient()と円形グラデーション用のradial-gradient()です。
古い環境向けでは書式の違うベンダープレフィックスが必要になりますが、最新のブラウザであればベンダープレフィックスは不要です。

線形グラデーション

linear-gradient([開始位置] [角度], 開始色, [途中色], 終了色)

開始位置、角度、途中色は省略可能で、デフォルトの開始位置はtop、角度は0deg、途中色は指定なしとして扱われます。

必要最低限の指定をしたサンプルは下記になります。

background-image: linear-gradient(#F15F79, #B24592);
結果

角度を変更

開始位置や角度を指定してグラデーションの方向を定義することができます。
グラデーションを左から右へ走るように変更するには to left という値で角度を指定できます。

background-image: linear-gradient(to left, #F15F79, #B24592);
結果

to left という指定は右から左にグラデーションさせるので、開始色は右側になります。
ベンダープレフィックスを付ける場合は to left ではなく left という表記になり、この場合は開始色が左になります。to left と同じ結果にするには、right を指定します。

background-image: -webkit-linear-gradient(right, #F15F79, #B24592);

上記は開始位置を左として指定していますが、角度を指定することもできます。マイナス値も使えます。

background-image: linear-gradient(270deg, #F15F79, #B24592);

0度は下から上へのグラデーションとなり、90度は左から右へのグラデーションになります。

ベンダープレフィックスをつける場合は時計回りではなく反時計回りになるので、ベンダープレフィックスをつける場合は下記になります。

background-image: -webkit-linear-gradient(180deg, #F15F79, #B24592);

各色の開始位置を指定

開始色や終了色の開始位置を割合(%)または数値(0~1.0)で指定できます。
下記の例では終了色を30%の位置からグラデーションさせています。

background-image: linear-gradient(#F15F79, #B24592 30%);

ピクセル指定の場合は下記のとおりです。

background-image: linear-gradient(#F15F79 100px, #B24592);

開始位置を指定しない場合はデフォルトで等間隔にグラデーションされます。

色を追加

開始色と終了色の中間に複数の色を追加することができます。

background-image: linear-gradient(#F15F79, #ffffff, #B24592);

透過

グラデーションは rgba() を使って透明度(0~1.0)も設定できます。

background: linear-gradient(rgba(246, 255, 0, 0.5), rgba(255, 0, 161, 0.5));

CSS3では background プロパティーの値をカンマで区切ることで、複数の背景を設定できます。
その際、先に指定したものが最上部に表示されていきます。
これを利用して、背景画像の上に透過したグラデーションをオーバーさせることができます。

background: linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(bg.jpg);

円形グラデーション

円形のグラデーションを実装するには radial-gradient を使います。

background-image: radial-gradient(#F15F79, #B24592);

ベンダープレフィックス

ブラウザのバージョンによってはベンダープレフィックスを付けないとグラデーションが効かない場合があるので、対応バージョンを増やしたい場合はベンダープレフィックスを付けてください。
ブラウザ名ベンダープレフィックスが必要なバージョンリリース年
Chrome25以下2013年
Safari6以下2012年
Firefox16以下2012年
Android5.0以下2014年
iOS6.1以下2013年
ベンダープレフィックス一覧
-moz-linear-gradient
古いFirefox用のベンダープレフィックスのため、ここでは省略します。
-webkit-gradient
古いWebkit系のブラウザ、Android 2.1-3等の古い環境に対応するなら必要。ここでは省略します。
-webkit-linear-gradient
-webkit-gradientの後のベンダープレフィックスで、2014年あたりのandroidに対応するなら必要。ここでは指定します。
-o-linear-gradient
古い Opera 用のベンダープレフィックスのため、ここでは省略します。
-ms-linear-gradient
古い IE 用のベンダープレフィックスで、IE10以降で linear-gradient がサポートされています。ここでは省略します。

Compassでのグラデーション

グラデーションは複数のベンダープレフィックスがあり、書式も異なるためとっつきにくいですが、Compassに用意されたミックスインを利用するとベンダープレフィックスは気にしなくてよくなります。

@include background(linear-gradient(#F15F79, #B24592));

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。