
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のグラデーションは他にも色々できるので是非お試しを!