ブログの記事内の写真にぼかした影をつける方法

スタイルシートを使って、このブログの記事に載せてある写真に自動的にぼかした影をつけて立体感を出すようにしました。

通常、画像編集ソフトでこのような影をつけるためには、ドロップシャドウなどと呼ばれる加工をしますが、そういった加工をせずにスタイルシートによって自動的に写真に影をつけてみよう・・・ということです。

影を表示するためにスタイルシートに追加したのは以下の行です。

box-shadow: 5px 5px 5px -3px #999

指定内容の説明は以下の通りです。

• 1番目の 5px ：右方向(x方向)にどれだけ影をずらすか
• 2番目の 5px ：下方向(y方向)にどれだけ影をずらすか
• 3番目の 5px： 影をどれだけぼかすか
• -3px： 影をどれだけ拡大・縮小するか (マイナスを指定すると縮小になる)
• #999 ： 影の色

4月28日の記事に書いたブログタイトルに枠を表示する方法と同じ box-shadow を使っていて、Internet Explorer 8 までだと影は表示されません。

Internet Explorer 9 や他のブラウザで見ると写真にぼかした影が表示されます。

ブログのヘッダーを春モードに変更しました

新潟県南魚沼市はすっかり春になり桜の開花がどんどん進んでいますが、このブログのヘッダー画像は駒ケ岳の雪景色のままでしたので、春らしく桜のヘッダー画像に差し替えてみました。 また、今までは画像編集ソフトを使ってブログタイトルが表示される位置に...

uonuma.biz

2012.04.28