画像に白い枠をつけてオシャレ度UPするCSS

更新日：2017年8月5日

あまり手間暇掛けず、勿論フォトショップも使わずに画像にオシャレな効果をつける方法をご紹介。CSSのみで実装出来ちゃいます。今回は画像に白い枠をつけてオシャレ度UPするCSSのご紹介です。イメージ的にはポラロイドカメラの写真のような感じでしょうか。
画像に影をつけてオシャレ度UPするCSS、画像を角丸にしてオシャレ度UPするCSSと紹介しましたが、今回は第三弾となります。

今回も簡単コピペで実装可能です！

実装すると下記のような感じになります。

まずHTMLですが、例えば以下のように記述します。

第一弾、第二弾に引き続き全く同じHTMLになりますが、要するにclassをちゃんと指定してあげてればいいだけです。

次にCSSには以下のように記述します。

.effect {
	padding: 11px;
	background-color: #FFFFFF;
	box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);
}

このCSSで画像に白い枠をつけます。
いつもの如く数値はお好みで変更お願いします。
今回はタイトルで白い枠をつけるとしているので、背景色を白に指定していますが、
background-color: #FFFFFF;
を変更すればお好みの背景色に変更出来ますよ。

これにて完成。
是非是非ご活用下さい。