CSS3を使うには、先行実装という意味の「Vendor-Prefix」という識別子がCSS3を使う上で必要になります。

Safari,Chrome -webkit-
Firefox -moz-
Opera -o-
Internet Explorer -ms-
▲このページのTOPに戻る▲

グラデーションの指定


●上から下
background: linear-gradient(#05FBFF, #1E00FF);

●右から左
background: linear-gradient(-135deg, #E4A972, #9941D8);

●円形
background: radial-gradient(#F2B9A1, #EA6264);

ボックスに影を付ける

テキストに影をつける事は出来ないが、
ボックスに影を付ける事が出来る。


【 CSS 】
#boxshadow{
	width:500px;
	box-shadow:5px 5px 5px #888888;IE以外の通常のブラウザ用
	background-color:#FFCC00;
	-pie-box-shadow:5px 5px 5px #888888;IE6-8用
	behavior:url(PIE.htc);IE6-8に適用させるタグ
	position:relative;IE6-8に適用させるタグ
}

《 注意点 》
borderを付けて、背景色を付けると、IE6-9ではズレる。背景の方がズレているみたい。
だから、borderだけにするか、背景だけにするかどっちかにすべき。

▲このページのTOPに戻る▲

半透明のやり方

たけのこノコノコ生え出たノコノコ
草からワラワラたくさん出た出た。

水がめたっぷりパカパカさくらんぼ。

rgba(255, 255, 255, 0.5); rgba(R, G, B, A);
Aが透明度。0が完全に透明、1は完全に不透明。だから0.5が丁度いいかも。


【 HTML 】
<div id="alfa_back">
<div class="alfa">
<p>たけのこノコノコ生え出たノコノコ<br />
草からワラワラたくさん出た出た。</p>
<p>水がめたっぷりパカパカさくらんぼ。</p>
</div>
</div>

【 CSS 】
#alfa_back{
	background-image:url(image/flower.jpg);
	padding:20px;	
}
.alfa{
	background:rgba(255, 255, 255, 0.5);
	background:-moz-rgba(255, 255, 255, 0.5);
	background:-webkit-rgba(255, 255, 255, 0.5);
	-pie-background:rgba(255, 255, 255, 0.5);
	behavior: url(PIE.htc);
	position:relative;
	padding:20px;
}

たけのこノコノコ生え出たノコノコ
草からワラワラたくさん出た出た。

水がめたっぷりパカパカさくらんぼ。


【 CSS 】
#alfa_back{
	background-image:url(image/flower.jpg);
	padding:20px;	
}
.alfa1{
/*半透明*/
	background:rgba(255, 255, 255, 0.5);
	background:-moz-rgba(255, 255, 255, 0.5);
	background:-webkit-rgba(255, 255, 255, 0.5);
	-pie-background:rgba(255, 255, 255, 0.5);
/*角丸*/
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;

	border:solid 1px #FFFFFF;
	behavior: url(PIE.htc);
	position:relative;
	padding:20px;
}

《 注意点 》
ボックスの影を付けると、FireFoxとCromeはいい感じだけど、IEは背景が透けないので使わない方がいいかも。

▲このページのTOPに戻る▲

http://weboook.blog22.fc2.com/blog-entry-260.html

0.0（透明）〜1.0（不透明）の範囲で透明度を指定する。※IE8以下には適用されません。
filterを使ってIEにも適用できるように出来る。

サンプル画像。背景花です。段々濃くなっていきます。

サンプル0.4です
サンプル0.6です
サンプル0.8です

【 HTML 】
<div id="boxcss3">
	<p>サンプル画像。背景花です。段々濃くなっていきます。</p>
	<div class="opa04">サンプル0.4です</div>
	<div class="opa06">サンプル0.6です</div>
	<div class="opa08">サンプル0.8です</div>
</div>


【 CSS 】
#boxcss3{
	background-image:url(image/flower.jpg);
	background-repeat:no-repeat;
}
#boxcss3 div{
	font-weight:bold;
	font-size:18px;
	border:solid 12px black;
	background-color:#009900;
	color:#FFFFFF;	
}
#boxcss3 .opa04{opacity:0.4; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);}
#boxcss3 .opa06{opacity:0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
#boxcss3 .opa08{opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}
※widthを指定しないと白い背景が全く反映されない。

例えば、薄い下地にテキストを書くときなんかに重宝するかも。
どうですか？良い感じに薄く文字がかけてる？？

今日はとてもとても食べ過ぎました。
腹いっぱいだー。


【 HTML 】
<div id="boxcss4">
	<div class="nakami">
		<p>例えば、薄い下地にテキストを書くときなんかに重宝するかも。<br />
		どうですか？良い感じに薄く文字がかけてる？？</p>
		<p>今日はとてもとても食べ過ぎました。<br />
		腹いっぱいだー。</p>
	</div>
</div>

【 CSS 】
#boxcss4{
	background-image:url(image/flower.jpg);
	background-repeat:no-repeat;
	padding:30px;
}
#boxcss4 .nakami{
	background-color:#FFFFFF;
	width:500px;
	opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	padding:20px;
}

テキストも一緒に薄くなってしまうので、濃い色（黒）とか指定しておいた方がいいかも。

▲このページのTOPに戻る▲