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

2010.01.09 / Labs

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

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

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

 

Box Round

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

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

 

Box Shadow

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

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

 

Text Shadow

テキストを光らせる

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

 

Text Glow

ボックスを透過させる

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

 

Opacity