グラデーションを表現する(1)

webサイトでよく見かける背景画像などのグラデーション。
この表現もCSSで実現することができます。

<div class="gra1">
グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。
</div>

.gra1 {
background: -moz-linear-gradient(top, #057eff ,#d9ddeb);
background: -webkit-gradient(linear, left top, left bottom,from(#057eff), to(#d9ddeb));
}

-moz-linear-gradientでFirefox、
-webkit-gradientでGoogle Chrome、Safariでグラデーションが表示されます。
色、方向の指定の仕方は以下のようになります。

background: -moz-linear-gradient(位置指定(top,leftなど), 開始色 ,終了色);
background: -webkit-gradient(linear,開始位置, 終了位置, 開始色, 終了色);

なお、一からCSSを記述すると手間ですが、
web上でCSSを生成してくれるサイトがあり、そちらを利用するととても便利です。

CSS Corners
http://csscorners.com/

グラデーション、角丸のCSSを生成してくれます。
画像を使わず、簡単にボタンなどを作りたい時にも便利です。

コメントを投稿する