Stunning 3D Effect With CSS

https://www.youtube.com/watch?v=OP0ur2QJT00 

저번시간에 이어 clip-path : polygon을 사용하여서 마치 장미꽃이 글자사이를 통과하는 효과를 내게 하는 재밌는 구문이다.

html 코드중에 어려운건 없지만 이미지를 불러올때 본인의 구글드라이브에 이미지를 업로드 한 후에 그 업로드된 이미지 링크를 src로 사용하면 이미지가 잘 불러와 질것이다. 

https://www.somanet.xyz/2017/06/blog-post_21.html

구글 드라이브를 외부 이미지 링크 저장소로 사용하기

솔직히 이거 찾는데만 한시간이상 소요가 되었다..ㅠ.,ㅜ

Html 태그

Css 태그

.container {
  height: 12em;
  width: 30em;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;  
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;    
}
h1 {
  font-size: 10em;
  font-family: "Poppins", sans-serif;
  position: absolute;
  line-height: 0;
}
img {
  position: absolute;
  width: 12.5em;
  right: -8.5em;
}
.img-front {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.img-back {
  filter: drop-shadow(0 2em 0.6em rgba(0,0,0,0.3));
}

css 에서 filter는 이미지 요소에 대한 시각효과라고 보면된다.

.img-back {
  filter: drop-shadow(0 2em 0.6em rgba(0,0,0,0.3));
}

뒤에 있는 장미에 drop-shadow효과를 주어 입체감을 추기 위한 구문이다. 

더 많은 css filter강좌는 아래 링크를 이용바란다.

 

https://ossam5.tistory.com/249

[CSS3강좌] 34강 CSS filter속성 - 오쌤의 니가스터디

 

 

 

See the Pen Stunning 3D Effect With CSS by ektjtthsrk (@minos79) on CodePen.