티스토리, Photo-Edge 효과 만들기

 

    

 

사진첩에 끼운 효과를 만들어보자!

 

 

 

 

 

 

 

 

 

Demo & Code

 

 

[Demo] Photo-Edge Effect

 

 

<!-- 아래 서식을 본문에 삽입 -->

<div class="photoEdge"></div>

 

 

/* 사용자 설정 시작 */
:root {
    --imageblock-scale:scale(0.942); /* 이미지블럭 크기 || 1 = 100% */
    --imageblock-border:1px solid rgba(0, 0, 0, 0.2); /* 이미지블럭 테두리 */
    --imageblock-edge-border1:50px solid transparent; /* 엣지 사이즈 */
    --imageblock-edge-border2:50px solid #fff; /* 엣지 사이즈 */
    --imageblock-edge-position1:-70px; /* 엣지 위치 */
    --imageblock-edge-position2:-70px; /* 엣지 위치 */
    --imageblock-edge-shadow1:0px 7px 6px -8px #000; /* 절개부분 */
    --imageblock-edge-shadow2:0px -7px 6px -8px #000; /* 절개부분 */
    --imageblock-margin-scale:scale(0.94); /* 여백 옵션을 주었을 경우의 이미지 크기 */
    --imageblock-margin-scale-mobile:scale(0.84); /* 여백 옵션을 주었을 경우의 이미지 크기 - 모바일 */
}
/* 사용자 설정 끝 */

/* 이미지블럭 */
.imageblock.edge { transform:var(--imageblock-scale); margin-left:auto; margin-right:auto; border:var(--imageblock-border) }

/* 여백 옵션을 주었을 경우의 이미지 크기 */
.imageblock.edge.pMargin img { transform:var(--imageblock-margin-scale) }
@media screen and (max-width:480px) {
	.imageblock.edge.pMargin img { transform:var(--imageblock-margin-scale-mobile) }
}

/* 엣지 - 우측 하단 */
.imageblock.edge:after {
    content: "";
    display: block;
    position: absolute;
    border: var(--imageblock-edge-border1);
    border-bottom: var(--imageblock-edge-border2);
    bottom: var(--imageblock-edge-position1);
    right: var(--imageblock-edge-position2);
    box-shadow: var(--imageblock-edge-shadow1);
    transform: rotate(135deg)
}

/* 엣지 - 좌측 상단 */
.imageblock.edge:before {
    content: "";
    display: block;
    position: absolute;
    border: var(--imageblock-edge-border1);
    border-top: var(--imageblock-edge-border2);
    top: var(--imageblock-edge-position1);
    left: var(--imageblock-edge-position2);
    box-shadow: var(--imageblock-edge-shadow2);
    transform: rotate(135deg)
}

.photoEdge { width:0px; height:0px; opacity:0 }

 

 

window.addEventListener('DOMContentLoaded', function(){
	const pMargin = 'off'; // 사진 여백 유무 || on or off
    if ( document.querySelector('body').id == 'tt-body-page' && document.querySelector('.photoEdge') ) {
      document.querySelectorAll('.imageblock').forEach(function(e){
        e.classList.add('edge');
        if ( pMargin == 'on' ) {
        	e.classList.add('pMargin')
        }
      })
    }
});