CSS3から扱えるエフェクト機能。

2010.01.09 / Labs

CSS
CSS3

CSS3から新たに利用できる機能を、いくつか試してみます。
ボックスの角丸やシャドウを追加できたり、かなり実用的な機能が使えるようになります。Firefox、Safariなどのモダンブラウザでは、すでにいくつかの機能は実装されていますが、残念ながらIEでは次のバージョン以降での対応になりそうです。

ボックスのコーナーを丸くする

ボックスの角丸では、Firefoxを代表とするmozillaと、Safari、Chromeを代表とするweb-kitを別々に記述する必要があります。

Box Round

.box-round {
	width: 300px;
	height: 200px;
	text-align: center;
	color: #ffffff;
	background: #999999;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* safari, Chrome */
}

.box-round {

width: 300px;

height: 200px;

text-align: center;

color: #ffffff;

background: #999999;

-moz-border-radius: 5px; /* Firefox */

-webkit-border-radius: 5px; /* safari, Chrome */

}

ボックスにシャドウを付ける

ボックスのシャドウも角丸と同じく、mozillaと、web-kitを別々に記述します。

Box Shadow

.box-shadow {
	width: 300px;
	height: 200px;
	text-align: center;
	color: #cccccc;
	border: 1px solid #e6e6e6;
	background: #ffffff;
	-moz-box-shadow: #e6e6e6 0px 3px 5px; /* Firefox */
	-webkit-box-shadow: #e6e6e6 0px 3px 5px; /* safari, Chrome */
}

.box-shadow {

width: 300px;

height: 200px;

text-align: center;

color: #cccccc;

border: 1px solid #e6e6e6;

background: #ffffff;

-moz-box-shadow: #e6e6e6 0px 3px 5px; /* Firefox */

-webkit-box-shadow: #e6e6e6 0px 3px 5px; /* safari, Chrome */

}

テキストにシャドウを付ける

X軸、Y軸の距離と、ぼかしの幅、カラーを指定できます。

Text Shadow

.text-shadow {
	text-shadow: #cccccc 3px 3px 5px;
}

.text-shadow {

text-shadow: #cccccc 3px 3px 5px;

}

テキストを光らせる

テキストのシャドウを応用して、光らせるような効果もできます。シャドウを多重にすることで、より濃いグローになります。

Text Glow

.text-glow {
	color: #ffffff;
	text-shadow: #ac4343 0px 0px 5px, #ac4343 0px 0px 5px;
}

.text-glow {

color: #ffffff;

text-shadow: #ac4343 0px 0px 5px, #ac4343 0px 0px 5px;

}

ボックスを透過させる

要素に対して透明度を0〜1の間で指定できます。

Opacity

.opacity {
	width: 150px;
	height: 200px;
	text-align: center;
	color: #666666;
	background: #ffffff;
	opacity:0.5;
}

.opacity {

width: 150px;

height: 200px;

text-align: center;

color: #666666;

background: #ffffff;

opacity:0.5;

}