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%の白グラデをソフトライトなどで重ねて、
単純に白っぽくなったハイライト色にはならないようにしています。
若干でも彩度が上がった色だと単調ではなくなります。
