CJコラム

CSSのグラデーション活用方法&今どきベンダープレフィックス

数年前からWebデザインでグラデーションが流行っていることは、ここでわざわざ言わずとも周知の事実ですね。
CSSで手軽に取り入れられて、かつ洗練された印象を与えることができるグラデーション。
iOSもグラデーション、Instagramのアイコンもグラデーション、きっとまだまだ流行は終わらない!ということで、今さらながらグラデーションのテクニック、使い方をまとめてみたいと思います。

①2018年のベンダープレフィックスを考えよう

グラデーションのCSSは、各ブラウザで表示させるためにさまざまな書き方があり、さらに1行が長く、何行も書き連ねるとものすごく可読性の悪いコードになってしまいます。
が、それも昔の話。現在は各ブラウザでの対応が進み、ほとんどのブラウザは1行記述するだけでOKです。

background-image: linear-gradient(to bottom, #fff 0%, #000 100%);

上記のコードはIE10〜、iOS6.1〜、Android4.4〜にも対応しています。これで無駄なベンダープレフィックスを無事駆逐できます。2018年のグラデーションのコードはこれで決まりですね!

※iOS6.1、Android4.4以前のブラウザにも対応させる場合は、-webkit-のベンダープレフィックスをつけます。(方向の指定方法が違うのでご注意ください)

background-image: -webkit-linear-gradient(top, #fff 0%, #000 100%);
background-image: linear-gradient(to bottom, #fff 0%, #000 100%);

②画像とグラデーションを重ねる!

上記のコードに画像URLを指定すれば、グラデーションと背景を重ねることができます。
複数の背景を指定するときは記述の順番がポイントで、先に書いたものが上の層、後に書いたものが下の層の順番で重ねられます。

こちらは白黒の背景写真の上に半透明のグラデーションを重ねた例。

See the Pen grd+photo by cj (@cj_0000) on CodePen.

こちらはグラデーションの上に半透明のパターンを重ねた例。

See the Pen pattern+grd by cj (@cj_0000) on CodePen.

③アニメーションさせる!

グラデーションの開始位置をアニメーションで動かすことで、流れるようなグラデーションアニメができます。
まず、始まりと終わりが同じ色のグラデーションを作ります。

background-sizeでグラデーションのサイズをdivのサイズより大きくし、background-positionをアニメーションさせることでグラデーションが流れるように動きます。

See the Pen gradation anime by cj (@cj_0000) on CodePen.

ローディング中のバーなどに使うとかっこいいかもしれません。
②の画像との重ね技にアニメーションを使っても、インパクトがあって注目を集められますね!

④インスタのアイコン風

インスタのアイコンのグラデーションのような、違う方向から別のグラデーションが入っているデザインをCSSだけで作れないか、やってみました。

See the Pen instagram icon by cj (@cj_0000) on CodePen.

角丸の四角形の上に疑似要素で黄色〜オレンジのグラデーションをつくり、overflow: hidden;ではみ出たところを非表示にしているだけです。
これは色選びに苦労しました。使うタイミングがあったら使おうかな・・・といったところです。

以上、CSSでのグラデーション活用法を挙げてみました。なにか参考になれば幸いです。
Webの要所要所に取り入れられて無駄なコードも増えにくいので、流行りが終わるまでグラデーションコーディングを楽しみたいと思います!

最新5件の記事