| Tips 3 | 画像に簡単にドロップシャドウをつけたい | CSS |
| ＞＞ | point CSSへの記述だけで実装可能 | ||
| ＞＞ | point 画像の加工は必要なし |
Webデザインで画像にドロップシャドウの効果を与えたい場合は多いだろう。その際、画像そのものに影をつける加工を施さなくても、CSSだけでできる場合があるので、試してみよう。それには、2010年に勧告されると言われているCSS 3で追加が検討されている「box-shadowプロパティ」を使う。
ここでは、ふたつのimg要素に対して異なる影の指定をしていこう。まずは影をつけたいimg要素に、classをつけておく【1】。次にCSSの記述をする。現状では、WebKit系ブラウザとFirefox向けには、接頭辞がついたbox-shadowプロパティを指定し、IE用にはfilterを使った独自の指定をする【2】。Operaでは、現状この指定は効かないので注意しておこう。プロパティの後ろに3つないし4つ並んだ値は、前から「horizontal（水平の距離）」、「vertical（垂直の距離）」、「blur（ぼかしの範囲）」、「color（影の色）」となっている。サンプルの.shadow001のように、前から3つ目の「blur」の値を省略すると、ぼかしのない影になる【3】。「horizontal」、「vertical」の部分には、マイナスの値を指定することもでき、逆方向に影がつく【4】。
【1】マウスオーバーで元のURLが表示される
【2】login、API Keyを指定する
【3】jQueryでセレクタを指定しておこう
【4】使用するThemeを指定できる
便利なbox-shadowプロパティだが、2011年2月時点では、CSS Backgrounds and Borders Module Level 3での勧告候補となっている。W3Cでの情報（w3.org/TR/css3-background/#the-box-shadow）等を、随時確認しよう。
ここでは、ふたつのimg要素に対して異なる影の指定をしていこう。まずは影をつけたいimg要素に、classをつけておく【1】。次にCSSの記述をする。現状では、WebKit系ブラウザとFirefox向けには、接頭辞がついたbox-shadowプロパティを指定し、IE用にはfilterを使った独自の指定をする【2】。Operaでは、現状この指定は効かないので注意しておこう。プロパティの後ろに3つないし4つ並んだ値は、前から「horizontal（水平の距離）」、「vertical（垂直の距離）」、「blur（ぼかしの範囲）」、「color（影の色）」となっている。サンプルの.shadow001のように、前から3つ目の「blur」の値を省略すると、ぼかしのない影になる【3】。「horizontal」、「vertical」の部分には、マイナスの値を指定することもでき、逆方向に影がつく【4】。
【1】マウスオーバーで元のURLが表示される
【2】login、API Keyを指定する
【3】jQueryでセレクタを指定しておこう
【4】使用するThemeを指定できる
便利なbox-shadowプロパティだが、2011年2月時点では、CSS Backgrounds and Borders Module Level 3での勧告候補となっている。W3Cでの情報（w3.org/TR/css3-background/#the-box-shadow）等を、随時確認しよう。
