아무래도 7note입니다. CSS를 사용하여 사진을 액자에 넣고 장식하는 방법

깨끗한 사진을 WEB로 눈에 띄게 하고 싶을 때에 딱 맞는 방법.



간단하지만, 그들이 나올 것이라고 생각합니다.
CSS에서만 만드는 방법을 소개합니다.

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 제작의 조금 테크 모임