CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

gradient

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

対応ブラウザ（2010 3/9 現在）

Safari , Google Chrome , Firefox

指定方法・表示例

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

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

開始点と終了点の途中にに色が指定します。
追加位置は割合（%）または数値（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;
}