CSSだけで背景をグラデーションにする

応用的な使い方としては背景グラデーションをCSSで指定し、背景を透明化したPNGファイルを上から重ねる事で縦横比率やサイズの崩れもなく、読み込み容量も減るのでページ速度の向上にもつながる

2色(シンプルコード)

linearを指定して色をコンマ(,)で区切る


3色以上

色指定の後に半角スペースを入れ数値プラス%,pxなどで位置を指定


斜め

deg指定で斜めグラデーションが可能


円形(楕円形)

redial指定で円形グラデーション


円形(正円)

redialに加えcircleを指定で正円


円形 – 中心位置を指定

redial指定時、at 数値%(px)で円の広がりの中心位置を指定可能


各部説明

/*
黒文字部分は全てのパターンに対して記述が必要
BとCの間はコンマではなく半角スペース
*/

background:A-gradient(B C,D,E,F);

部所 プロパティ 説明
A linear 線形のグラデーション
radial 円形のグラデーション
B
A=radial時のみ
ellipse
デフォルト値
width,heightに合わせて楕円に広がる
circle 正円に広がる
C
A=radial時のみ
at px(%) px(%) left・topが起点
D
開始色
#FFFFFF 16進数
rgb(255,255,255) RGBコード
rgba(255,255,255,0.5) 半透明指定。0.5=透明度50%
white カラーネーム
E
中間色(省略可)
#FFFFFF 16進数
rgb(255,255,255) RGBコード
rgba(255,255,255,0.5) 半透明指定。0.5=透明度50%
white カラーネーム
F
終了色
#FFFFFF 16進数
rgb(255,255,255) RGBコード
rgba(255,255,255,0.5) 半透明指定。0.5=透明度50%
white カラーネーム

おすすめジェネレーター

各種ブラウザでコードが異なるのでcssに直接落としこむのはかなり面倒ですが、WEB上に簡単に生成してくれるサービスがありますので、おすすめのジェネレーターを紹介します

Grad3 : http://grad3.ecoloniq.jp/

いくつかの配色パターンとちょっとしたアイコンの表示も数クリックで作成が可能、しかも全ブラウザようにコードを吐き出してくれます

この記事が気に入ったら
いいね ! お願いします(><;)

投稿者:和禅雅

この記事へのコメント