CSS3 要素を透明に出来る Opacity と RGBa の使い方

CSS3 要素を透明に出来る Opacity と RGBa の使い方

Opacity、RGBa は共に要素に透明度を指定することができるCSS3のプロパティです。

RGBa の指定については「CSS3 グラデーション(gradient)の指定方法」でも使用してますが、今回は詳しくまとめておきたいと思います。

Domo Page

…ここからが続き

Opacity プロパティ

対応ブラウザ(2011 4/1 現在)
Firefox 2以上,Safari 2以上,Opera 9以上,IE8以上,Chrome

指定方法・適用できるCSSプロパティ

Opacity プロパティ

値には,コンマ(.)を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定することも出来ます。

border、padding、background、img、テキスト、他のプロパティ

html

<div class="demo">
	<p class="opacity">background: #333;<br>
	padding: 10px;<br>
	border: 5px solid #000;<br>
	color: #fff;<br>
	opacity: 0.6</p>
</div>

css

.demo	{
	background: url(images/bg1.gif);
	padding: 10px;
	margin-bottom: 10px;
}
.opacity	{
	background: #333;
	padding: 10px;
	border: 5px solid #000;
	color: #fff;
	opacity: 0.6;
}

Opacity プロパティのデモページ

RGBa プロパティ

対応ブラウザ(2011 4/1 現在)
Firefox 3以上,Safari 3以上,Opera 10以上,IE8以上,Chrome

指定方法・適用できるCSSプロパティ

RGBa プロパティ

値には,コンマ(.)を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定することも出来ます。

border-color、background-color、color

html

<h2>background-color</h2>
<div class="demo">
	<p class="rgba1">background-color: rgba(51,51,51,0.6);<br>
	padding: 10px;<br>
	border: 5px solid #000;<br>
	color: #fff;</p>
</div>

<h2>border-color</h2>
<div class="demo">
	<p class="rgba2">background-color: rgba(51,51,51,0.6);<br>
	padding: 10px;<br>
	border: 5px solid rgba(0,0,0,0.6);<br>
	color: #fff;</p>
</div>

<h2>color</h2>
<div class="demo">
	<p class="rgba3">background-color: rgba(51,51,51,0.6);<br>
	padding: 10px;<br>
	border: 5px solid rgba(0,0,0,0.6);<br>
	color: rgba(255,255,255,0.6);</p>
</div>

css

.demo	{
	background: url(images/bg1.gif);
	padding: 10px;
	margin-bottom: 10px;
}
.rgba1	{
	background-color: rgba(51,51,51,0.6);
	padding: 10px;
	border: 5px solid #000;
	color: #fff;
}
.rgba2	{
	background-color: rgba(51,51,51,0.6);
	padding: 10px;
	border: 5px solid rgba(0,0,0,0.6);
	color: #fff;
}
.rgba3	{
	background-color: rgba(51,51,51,0.6);
	padding: 10px;
	border: 5px solid rgba(0,0,0,0.6);
	color: rgba(255,255,255,0.6);
}

RGBa プロパティのデモページ

おまけ

RGBa は CSS3 の text-shadowbox-shadow にも適応させる事が出来ます。

両方非常に分かりにくいですが、デモも作っておきました。

html

<div class="demo">
    <p class="text-shadow">background-color: rgba(51,51,51,0.8);<br>
    padding: 10px;<br>
    font-weight: bold;<br>
    color: #fff;<br>
    text-shadow: 3px 3px 1px rgba(255,0,0,0.6);</p>
</div>

<div class="demo">
    <p class="box-shadow">background-color: rgba(51,51,51,0.8);<br>
    padding: 10px;<br>
    color: #fff;<br>
    -webkit-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);<br>
    -moz-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);</p>
</div>

css

.text-shadow	{
	background-color: rgba(51,51,51,0.8);
	padding: 10px;
	font-weight: bold;
	color: #fff;
	text-shadow: 3px 3px 1px rgba(255,0,0,0.6);
}
.box-shadow	{
	background-color: rgba(51,51,51,0.8);
	padding: 10px;
	color: #fff;
	-webkit-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);
	-moz-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);
}

Domo Page

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