cssで画像をつかわずにグラデーション表現
2013.12.20
スタッフブログ
どーもタカミチです。
今、レスポンシブデザインでの制作にあたって、
画像で表現しにくいメニューやボタンなどの設置
などがどうしてもでてきてしまうので、
cssのみでの表示方法を勉強中です。
そのなかの表現方法のひとつとして
グラデーションの表現方法をメモ
やり方はいたって簡単
ただ、ブラウザによって記述方法が変わるので、そこだけ注意
今主流のブラウザの記述方法として
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.56, #09123c), color-stop(0.00, #0e3e8d));
background: -webkit-linear-gradient(top, #0e3e8d 0%, #09123c 56%);
background: -moz-linear-gradient(top, #0e3e8d 0%, #09123c 56%);
background: -o-linear-gradient(top, #0e3e8d 0%, #09123c 56%);
background: -ms-linear-gradient(top, #0e3e8d 0%, #09123c 56%);
background: linear-gradient(to bottom, #0e3e8d 0%, #09123c 56%);
ざっとこんな感じで記述すれば、まず問題ないはず。
後はレイアウトにあった大きさや色を調節すれば完成です。
まあ、実は上のcssはこのサイトでつくりました。知ったような口きいてすいません。
http://grad3.ecoloniq.jp/
このサイト超便利です。お試しあれ。
レスポンシブでの表現方法はもっともっと勉強しなければ
