CSS3の役立つグラデーションパターンとサンプル
CSS3のグラデーションを使った、web制作で役立つ2種類のグラデーションパターンとサンプルの紹介です。 基本的な線形グラデーションと円形のグラデーションパターンを紹介しています。
領域にグラデーションを設定しても、極端な色合いになり、目立ちすぎて使えないといった経験はないですか？ そういう時は同系色で変化が小さい色を設定する事で、微妙なさりげないグラデーションを表現することができます。
このページではそういった、透過とはまた違う役立つグラデーションを紹介していきますね。
同系色の線形グラデーションサンプル
同系色の線形グラデーションの設定方法
cssのfrom(#fff)の色でグラデーションの開始色、to(#BCBCBC)でグラデーションの終了色を指定しています。 ここの色を変える事で自由に色指定を行えます。 もちろん#fffのような16進数ではなく、rgbaに変更して透過すればもっと鮮やかなグラデーションにする事も可能です。
background:#ccc;というように設定もしていますが、これはグラデーションが適用されなかった場合に備えての設定となります。 グラデーションが適用されなかった場合はこの色が反映されます。
円形グラデーションサンプル
●css
.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のグラデーションは他にも色々できるので是非お試しを！