テンプレート・素材カテゴリ


CSS3で円形グラデーションを作る「radial-gradient」

TOPページ > デザイン講座 > CSS3で円形グラデーションを作る「radial-gradient」

linear-gradientでは、面倒だったグラデーションも簡単に作ることができます。基本を学んで、いろいろなパターンを作ってくださいね。


radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 終了色);

radial-gradient

中心から外側へ色が濃くなる円形グラデーション。背景に設定することで文字も入力できます。

.radial-gradient {
  color: #fff;
  text-align: center;
  height: 100px;
  background-color: #b5cfe2;
  background-image: -webkit-radial-gradient(50% 50%, cover, #b5cfe2, #1e5799);
  background-image: -moz-radial-gradient(50% 50%, cover, #b5cfe2, #1e5799);
  background-image: -o-radial-gradient(50% 50%, cover, #b5cfe2, #1e5799);
  background-image: -ms-radial-gradient(50% 50%, cover, #b5cfe2, #1e5799);
  background-image: radial-gradient(50% 50%, cover, #b5cfe2, #1e5799);
}

radial-gradient
(開始位置と角度, 形状とサイズ, 開始色, 中間色, 終了色);

radial-gradient

左下から右上へ色が濃くなる円形グラデーション。背景に設定することで文字も入力できます。

.radial-gradient {
  color: #fff;
  text-align: center;
  height: 100px;
  background-color: #f9c0f9;
  background-image: -webkit-radial-gradient(bottom left, farthest-side, #f9c0f9, #ff44c7, #ff268b);
  background-image: -moz-radial-gradient(bottom left, farthest-side, #f9c0f9, #ff44c7, #ff268b);
  background-image: -o-radial-gradient(bottom left, farthest-side, #f9c0f9, #ff44c7, #ff268b);
  background-image: -ms-radial-gradient(bottom left, farthest-side, #f9c0f9, #ff44c7, #ff268b);
  background-image: radial-gradient(bottom left, farthest-side, #f9c0f9, #ff44c7, #ff268b);
}

radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 終了色);

linear-gradient

真ん中に正円のグラデーションを作ることもできます。

.radial-gradient-green {
  color: #fff;
  text-align: center;
  height: 100px;
  background-color: #7cbc0a;
  background-image: -webkit-radial-gradient(50% 50%, circle contain, #df0, #7cbc0a);
  background-image: -moz-radial-gradient(50% 50%, circle contain, #df0, #7cbc0a);
  background-image: -o-radial-gradient(50% 50%, circle contain, #df0, #7cbc0a);
  background-image: -ms-radial-gradient(50% 50%, circle contain, #df0, #7cbc0a);
  background-image: radial-gradient(50% 50%, circle contain, #df0, #7cbc0a);
}

参照:Ultimate CSS Gradient Generator - ColorZilla.com
こちらのグラデーションジェネレーターを使うと、色選びからコード作成までとっても簡単に作れますよ。おすすめです。


Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ