photoshopの加工でなく、CSSで写真の周りを装飾する

例えば商品写真をサイトに載せることになったとします。
photoshopで写真の色調加工して、そのままサッと載せても別段問題はないわけですが、ちょっと一工夫したいとします。
白枠をつけて写真っぽくしてみたいと思います。
白枠をつけて写真っぽく

このように写真を1枚加工するくらいなら楽なものです。
画像を全選択後、白で6pxの境界線を書き、続けて灰色で1pxの境界線を書くだけです。
しかし、例えばこれが20枚とか30枚とか100枚とか200枚とか、そんな値になってきたとしたら、これはもうとてもやってられません。
というわけで、Photoshopの加工でなくCSSで白枠つけて写真っぽくする方法。

CSS

div#photobox img {
	background: #fff;
	border: 1px solid #ccc;
	padding: 5px;
}

img に class でやっても別にいいんですが、写真の量が多いと class をつけるのが面倒なので、おとなしく div で囲ってしまいましょう。

<div id=”photobox”> の中の <img /> に対する指定です。

カスタマイズ

背景色を黒にしたり、線の太さを太くしたりなど、カスタマイズもラクです。

こんなのとか
CSSで写真の周りを装飾する01

div#photobox img {
	background: #fff;
	border: 5px solid #000;
	padding: 1px;
}

こんなのとか
CSSで写真の周りを装飾する02

#photobox img {
	background: #fff;
	border: 1px solid #ccc;
	padding: 5px 5px 55px 5px;
}

逐一photoshopで加工するより断然ラクです。あとでCSSいじれば変更もできますしね。

2 件のコメント

  • 検索からきました。
    ブログにアップした写真に白枠をつけるには
    こうすればよかったのですね。
    丁寧な解説ですぐに理解できました。
    リンク貼らせていただきましたので報告まで。
    ありがとうございました。

  • コメントありがとうございます。
    大変遅いレスで申し訳ないです。
    こちらこそ、うれしいお言葉ありがとうございます。
    お役に立ててよかったです。

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    CAPTCHA