WEBページを作ったけど、写真を配置するだけだと、あまり見栄えがしない。

そんな時に、白い縁取りをつけ、ポラロイド写真風にするだけで、オシャレなデザインに早変わりします。

でも、わざわざ画像ソフトで写真を加工するのも面倒くさいですよね。

実は、スタイルシートだけで簡単にポラロイド写真風にスタイリングができるので、備忘録として記載しておきます。

HTMLとCSSコード

HTML

<div class="photo">
<img src="画像URL/img.jpg" />
</div>

CSS

 .photo {
  display: inline-block;
  padding: 5px;
  box-shadow: 4px 4px 10px #ccc;
  background-color: #FFF;
}
 .photo:after {
  display: block;
  content: "画像の説明";
  text-align: center;
}

スタイリング結果

スタイリング前

スタイリング後

もうちょっとおしゃれに見えるアドバイス

スタイルシートでちょっと画像を傾けてやると、動きが出てオシャレに見えます。

CSS

 .photo {
  display: inline-block;
  padding: 5px;
  box-shadow: 4px 4px 10px #ccc;
  background-color: #FFF;
  transform: rotate(-4deg); ←これを追加することで斜めになる
}
 .photo:after {
  display: block;
  content: "画像の説明";
  text-align: center;
}

スタイリング後

まとめ

写真の見せ方だけで、デザインの単調さを解消出来たり、ぐっとオシャレに見せることができます。

CSSのコードも簡単なので、デザインにアクセントを付けたいときは、ぜひどうぞ☆