CSS3 グラデーション(gradient)の指定方法

CSS3 グラデーション(gradient)の指定方法

CSS3 でグラデーションの指定が出来る -moz-linear-gradient -webkit-gradient の使用方法などを紹介、解説したいと思います。

Domo Page

…ここからが続き

gradient

background に指定することで、ボックスの背景色を線形にグラデーションに指定する値です。
(※ブラウザによって記述方法が変わりますので注意が必要です。)

対応ブラウザ(2010 3/9 現在)
Safari , Google Chrome , Firefox

指定方法・表示例

gradient 指定方法

.gradient01	{
	background: -moz-linear-gradient(top, #990, #066); /* Firefox用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066)); /* Safari,Google Chrome用 */
}

gradient 表示例

グラデーションの途中に色を追加

開始点と終了点の途中にに色が指定します。
追加位置は割合(%)または数値(0~1.0)で指定します。

指定方法・表示例

グラデーションの途中に色を追加 指定方法

.gradient04	{
	background: -moz-linear-gradient(left top, #990,
			#c36 30%,
			#f60 50%,
			#000 70%,
			#066); /* Firefox用 */
	background: -webkit-gradient(linear, left top, right bottom, from(#990),
			color-stop(0.3, #c36),
			color-stop(0.5, #f60),
			color-stop(0.7, #000),
			to(#066)); /* Safari,Google Chrome用 */
}

グラデーションの途中に色を追加 表示例

グラデーションを透過する

rgb を使ってアルファ値(透明度)も設定できます。
アルファ値は 0 ~ 1.0 で指定(0 が透明、1.0 が不透明)

指定方法・表示例

グラデーションを透過する 指定方法

.gradient05	{ background: url(images/01.gif); }
.gradient05 p	{
	background: -moz-linear-gradient(top,
			rgba(60,100,50,0.5),
			#066); /* Firefox用 */
	background: -webkit-gradient(linear, left top, left bottom,
			from(rgba(60,100,50,0.5)),
			to(#066)); /* Safari,Google Chrome用 */
	padding: 20px;
}

グラデーションを透過する 表示例

Download

Domo Page

Comments

null

null

とても参考になります。
まだまだHTML5とCSS3に関するリファレンスが少なく、また未熟な中でこのサイトは重宝してます。
ページ構成も解り易くていいですね!

2010年07月25日 23:47

MIYA

MIYA

ブラウザ毎に会社も違い、独自開発で進んできたからです。

同じ記述に動くようになるように、Web全体は動いてますよ。

2010年06月15日 11:44

fujwara

fujwara

なぜ、ブラウザ毎に異なるのですか。
いつか、同じ記述で動くようになるのでしょうか。

2010年06月14日 08:04