CSSで写真を額縁に入れて飾る方法

index.html

<div class="frame"><img src="sample.jpg" alt="写真"></div>

style.css

.frame{
  border-top: 20px solid #B37D4D;    /* 上のborderを指定 */
  border-right: 20px solid #B37D4D;  /* 右のborderを指定 */
  border-bottom: 20px solid #D2AE7E; /* 下のborderを指定 */
  border-left: 20px solid #D2AE7E;   /* 左のborderを指定 */
  box-shadow: inset 0 0 10px #000;   /* 内側に影を指定 */
  display: inline-block;             /* 写真に合わせるためインラインブロック要素にする */
}
.frame img {
  position: relative; /* z-indexを指定 */
  z-index: -1;        /* 影を写真の上に重ねるためマイナス値を指定 */
}

解説

borderの特性として、上下左右で色が違う場合重なる部分が斜めに配色されます。

これを利用することで、額縁特有の接続部分を再現することができます。
あとは光の入り方を再現するために左&下と、右&上で色を分けます。

影を指定するのですが、影は普通に入れてしまうと写真の後ろに入ってしまうので、z-indexを利用して写真を後ろに配置し、.frameに対して内向きの影を入れます。これで立体感が少しでます。

まとめ

cssだけで簡単に額縁を装飾する方法を解説しました。
こだわった額縁にしたい場合はcssでは難しいので画像を背景画像として指定するなどの必要があります。

CSSで作るメリットとしては、写真の大きさに合わせて額縁も自動で大きさが変わるので作成や変更が簡単なところですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ