横浜のホームページ制作 スタジオFIXの社長ブログ

Photoshopで簡単ポラロイド風イメージの作り方 を先日ご案内しましたが、
ホームページ上にたくさんの画像を掲載したい場合、
いちいち こんな方法 で画像作成していたら、手間がかかってしまいますよね。
そのような場合は、CSSでコントロールしちゃうのが簡単です。


■元の写真のサイズが横400×縦300ピクセルの場合

緑色の部分が、横400×縦300ピクセルです。
その回りに、枠と影の領域が加わりますので、
画像全体のサイズは、元の写真のサイズより一回り大きい
横410×縦325ピクセルになります。


■CSS (スタイルシート) の書き方

1. img.shadow {
background: url(bg_photo.gif) no-repeat;
padding: 5px 5px 15px 5px;}

■htmlの書き方

1. <img src="001.jpg" width="400" height="300" class="shadow" />

要するに、元の写真の下に背景画像を敷くことで
ポラロイド風に見えちゃうというわけです。


■元の写真


この写真にCSSで背景画像をくっつけると…



この方法なら、ホームページに大量の写真を配置したい場合でも
imgタグ部分に、class=を指定するだけで済むので簡単ですね。（・∀・）


この方法で使用した背景画像は、以下からご自由にご利用ください。
画像をダウンロード
ホームページ制作時にぜひお試しくださ〜い。(^-^)ノ