綺麗なグラデーションボタンの作り方

Yukimi Sato 623views 更新:2014年3月14日
Aipo.comで使用しているグラデーションボタンを作った時のマイルール的な覚書です。
実際に使用しているグラデCSS↓
.gradation-orange {
     color: #FFFFFF;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
     background-color: #ffb133;
     background-image: -moz-linear-gradient(top, #ffb133, #f37318);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffb133), to(#f37318));
     background-image: -webkit-linear-gradient(top, #ffb133, #f37318);
     background-image: -o-linear-gradient(top, #ffb133, #f37318);
     background-image: linear-gradient(to bottom, #ffb133, #f37318);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffb133', endColorstr='#fff37318', GradientType=0);
     border-color: #f39600 #e15e04 #e15e04;
     *background-color: #f37318;
     *border: 1px solid #e15e04;
}
です。
シャドウの濃さについては、数字上同じ濃さにしても、
目で見た時にベースの濃さにシャドウの濃さも合わせて調整しないと、
シャドウが消えたように見えることがあるからです。
ボーダーについても同じです。
ボトムに合わせて他を設定するとトップは濃すぎてしまう、
逆にトップに合わせるとボトムで淡すぎて輪郭がぼやけてしまうといったことになります。
グラデの色はどうやって決めているのかというと、
photoshopでベースの色に20-30%の白グラデをソフトライトなどで重ねて、
単純に白っぽくなったハイライト色にはならないようにしています。
若干でも彩度が上がった色だと単調ではなくなります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません