スタッフブログStaffblog

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/
このサイト超便利です。お試しあれ。

レスポンシブでの表現方法はもっともっと勉強しなければ
レスポンシブ2

この記事をSNSでシェア!