CSS3 影（Shadows）

CSSを使用して3要素に影を適用することができます。

CSSを使用して3影

CSS3Photoshopのように要素に影効果を追加できるようにし、画像を使用することなくCSSで行えます。3以前、スライス画像は非常に煩わしい要素の周りに影を作成するために使用されていました。

次の節では、テキストと要素にシャドウを適用する方法について説明します。

CSS3 box-shadow属性を使って

box-shadow属性は、要素のフレームにシャドウを追加するために使用できます。複数のシャドウ効果を適用するには、カンマ区切りのシャドウリストを使用できます。ボックスシャドウの基本的な文法は以下のように示されます：

box-shadow:　offset-x　offset-y　blur-radius　color;

このbox-shadow属性の要素は以下の意味を持っています：

• offset-x —シャドウの水平偏移量を設定します。

• offset-y —シャドウの垂直偏移を設定します。

• blur-radius —ぼやけ半径を設定します。値が大きいほどぼやけが大きくなり、シャドウのエッジがぼやけます。負の値は使用できません。

• color —シャドウの色を設定します。省略したり指定しなかった場合、デフォルトで使用されますcolor属性の値を参照してください。

CSS3 box-shadow属性について、他の可能な値の詳細情報を学ぶために

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　box-shadow:　5px　5px　10px　#999;
}

同様に、カンマ区切りのリストを使って複数のボックスにシャドウを追加できます：

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background:　#000;
　　　　box-shadow:　5px　5px　10px　レッド,　10px　10px　20px　イエロー;
}

CSS3 text-shadow属性を使って

text-shadow属性を使ってテキストにシャドウ効果を適用します。box-shadowの同じ記法を使ってテキストに複数のシャドウを適用します。

h1　{
　　　　text-shadow:　5px　5px　10px　#666;
}
h2　{
　　　　text-shadow:　5px　5px　10px　レッド,　10px　10px　20px　イエロー;
}