box-shadowで古びた写真を サンプル5でも紹介したように、box-shadowをうまく使うと、「shadow」という単語からイメージされる以上の効果が得られる。サンプル6は写真画像にbox-shadow を複数指定することで、まるで古びた写真のようなフィルター効果を適用したものだ。 以下の2枚の写真はどちらもimg要素で同じ画像を表示しているが、右側の写真にはbox-shadowでフィルター効果を付けている。CSSのマスクなどのプロパティは一切利用せず、box-shadowだけでフィルターを表現している。 ■サンプル6[HTML] <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>box-shadow 古い写真 | ASCII 菊池崇のCSS3実践道場</title> </head> <bod
![box-shadowを極めて「Mac風UI」を作る! (5/6)](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f182fdcf6ff200bb90121d0c23ab7c9dd90291f/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2011%2F01%2F18%2F286961%2Fl%2F243c300f4d8c91f6.jpg)