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

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article