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


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

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

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


linear-gradient(開始位置, 開始色, 終了色);

linear-gradient

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

.linear-gradient {
  color: #fff;
  text-align: center;
  height: 100px;
  background-color: #b5cfe2;
  background-image: -webkit-linear-gradient(top, #b5cfe2, #1e5799);
  background-image: -moz-linear-gradient(top, #b5cfe2, #1e5799);
  background-image: -o-linear-gradient(top, #b5cfe2, #1e5799);
  background-image: -ms-linear-gradient(top, #b5cfe2, #1e5799);
  background-image: linear-gradient(to bottom, #b5cfe2, #1e5799);
}

linear-gradient

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

.linear-gradient {
  color: #fff;
  text-align: center;
  height: 100px;
  background-color: #b5cfe2;
  background-image: -webkit-linear-gradient(left, #b5cfe2, #1e5799);
  background-image: -moz-linear-gradient(left, #b5cfe2, #1e5799);
  background-image: -o-linear-gradient(left, #b5cfe2, #1e5799);
  background-image: -ms-linear-gradient(left, #b5cfe2, #1e5799);
  background-image: linear-gradient(to right, #b5cfe2, #1e5799);
}

linear-gradient

ストライプも作れます。背景にすることで文字も入力できます。

.linear-gradient-border {
  color: #fff;
  text-align: center;
  height: 100px;
  background-color: #7cbc0a;
  background-image: -webkit-linear-gradient(left, #9dd53a 50%, transparent 50%);
  background-image: -moz-linear-gradient(left, #9dd53a 50%, transparent 50%);
  background-image: -o-linear-gradient(left, #9dd53a 50%, transparent 50%);
  background-image: -ms-linear-gradient(left, #9dd53a 50%, transparent 50%);
  background-image: linear-gradient(to right, #9dd53a 50%, transparent 50%);
  -webkit-background-size: 15px;
  -moz-background-size: 15px;
  background-size: 15px;
}

linear-gradient

コードが大変だけど、こんな風にきれいなグラデーションも作れます。

.linear-gradient {
  color: #fff;
  text-align: center;
  height: 100px;
  background-image: -webkit-linear-gradient(rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -webkit-linear-gradient(right, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -webkit-linear-gradient(left, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4));
  background-image: -moz-linear-gradient(rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -moz-linear-gradient(right, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -moz-linear-gradient(left, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4));
  background-image: -o-linear-gradient(rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -o-linear-gradient(right, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -o-linear-gradient(left, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4));
  background-image: -ms-linear-gradient(rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -ms-linear-gradient(right, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), -ms-linear-gradient(left, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4));
  background-image: linear-gradient(rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), linear-gradient(to left, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4)), linear-gradient(to right, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4));
}

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


Recommended


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

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

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

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

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



ページトップへ