CSS3の役立つグラデーションパターンとサンプル

2017/2/11 CSSデザイン

CSS3のグラデーションを使った、web制作で役立つ2種類のグラデーションパターンとサンプルの紹介です。 基本的な線形グラデーションと円形のグラデーションパターンを紹介しています。

領域にグラデーションを設定しても、極端な色合いになり、目立ちすぎて使えないといった経験はないですか？ そういう時は同系色で変化が小さい色を設定する事で、微妙なさりげないグラデーションを表現することができます。

このページではそういった、透過とはまた違う役立つグラデーションを紹介していきますね。

同系色の線形グラデーションサンプル

線形グラデーションの表示サンプル 
<div class="sample">
  <p>僅かなグラデーションを適用しています</p>
</div>

.sample{
  height:200px;
  padding:40px;
  box-shadow:1px 1px 1px #B3B3B3;
  background:#ccc;
  background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#BCBCBC));
  background:-moz-linear-gradient(top, #fff, #BCBCBC);
  background:-o-linear-gradient(top, #fff, #BCBCBC);
  background:-ms-linear-gradient(top, #fff, #BCBCBC);
  background:linear-gradient(top, #fff, #BCBCBC);
}

同系色の線形グラデーションの設定方法

cssのfrom(#fff)の色でグラデーションの開始色、to(#BCBCBC)でグラデーションの終了色を指定しています。 ここの色を変える事で自由に色指定を行えます。 もちろん#fffのような16進数ではなく、rgbaに変更して透過すればもっと鮮やかなグラデーションにする事も可能です。

background:#ccc;というように設定もしていますが、これはグラデーションが適用されなかった場合に備えての設定となります。 グラデーションが適用されなかった場合はこの色が反映されます。

円形グラデーションサンプル

メモ帳風の円形グラデーションの表示サンプル 
<div class="sample1">
  <div class="sample2">
    <p>古びたメモ帳グラデーション</p>
    <p>古びたメモ帳風のグラデーションです。
       紙の質感を円形グラデーションで出し、罫線の部分を
       線形のグラデーションで表現しています</p>
   </div>
</div>

.sample1 {
  position: relative;
  padding: 10px 20px 5px;
  width: 330px;
  line-height: 25px;
  font-size: 12px;
  background-color: #e8dca4;
  background-image: -webkit-gradient(radial, center top, 0, center top, 300, from(#fcf8e3), to(#e8dca4));
  background-image: -moz-radial-gradient(center top, circle farthest-side, #fcf8e3, #e8dca4);
  background-image: -o-radial-gradient(center top, circle farthest-side, #fcf8e3, #e8dca4);
  background-image: -ms-radial-gradient(center top, circle farthest-side, #fcf8e3, #e8dca4);
  background-image: radial-gradient(center top, circle farthest-side, #fcf8e3, #e8dca4);
  background-size: 400px 540px;
  background-repeat: no-repeat;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}
.sample2 {
  background-image:-webkit-linear-gradient(#c7c397 1px, transparent 1px);
  background-image:-moz-linear-gradient(#c7c397 1px, transparent 1px);
  background-image:-o-linear-gradient(#c7c397 1px, transparent 1px);
  background-image:linear-gradient(#c7c397 1px, transparent 1px);
  background-size: 25px 25px;
  background-repeat: repeat;
  background-position:0 50px;
}
.sample1 p {
  margin-bottom: 25px;
  padding: 0 15px;
  color: #333;
}
.sample1 p:last-child{
  margin: 0;
  padding-bottom: 40px;
}

css3の円形グラデーションを使って古びたメモ帳風のデザインを表現しています。 古びた紙の質感は中央に円形グラデーションを設定し、淵の方はbox-shadowで再現しています。

また罫線の部分は線形のグラデーションで表現する事で、メモ帳のようにすることができます。

設定方法

メモ帳の紙の部分の色は、.sample1のfrom(#fcf8e3), to(#e8dca4)の部分を変更する事で変える事ができます。 罫線の色を変えたい場合は.sample2のグラデーションを設定している部分の色を変えて下さい。

まとめ

こんな感じで同系色の薄いグラデーションを設定する事で、グラデーション部分が目立ちすぎないシンプルな装飾を行う事ができます。 今回は円形と線形のグラデーションの紹介でしたが、CSS3のグラデーションは他にも色々できるので是非お試しを！

ゆう。

トップページへ戻る