[CSS] 이미지 반사 그림자 효과 만들기 (feat. blur 필터)

이번 포스트에서는 이미지 특정 부분이 반사된 그림자 효과를 만들어 보도록 하겠습니다.

 

필자는 원래 box-shadow 속성을 사용해 그림자를 줬지만 이번 홈페이지 리뉴얼 작업으로 인해 좀 더 사실적인 그림자를 구현하기 위해 해당 방법을 사용하게 되었습니다. 

 

반사된 그림자 효과가 적용된 모습

 

언뜻 보면 티가 안 날 수도 있지만 위와 같이 캐러셀 슬라이드 같은 곳에 적절히 적용해주면 좀 더 입체적이고 현실적인 그림자 효과를 낼 수 있습니다.

 

---

HTML

마크업은 그림자 효과를 줄 이미지 태그를 두 개 넣어주시거나 div태그에 background 속성으로 이미지를 불러오시면 됩니다. 본 포스트에서는 img 클래스를 가진 div와 해당 div의 ::after 가상 요소에 background 속성을 사용해보도록 하겠습니다.

 

<div class="container">
  <div class="img"/>
</div>

 

---

CSS

해당 효과를 위해 box-reflect 속성을 사용할수도 있겠지만, 파이어폭스 등 일부 브라우저에서 제대로 동작하지 않기 때문에 주요 브라우저에서 지원하고 있는 filter의 blur 속성을 사용해보도록 하겠습니다. 우선 똑같은 이미지 두 개를 겹쳐놓은 뒤, 뒤에 있는 이미지를 blur로 흐리게 하고 위치와 크기를 세부 조절하여 그림자 효과를 주는 방식입니다.

 

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  width: 300px;
  height: 300px;
  position: relative;
  .img {
    width: 100%;
    height: 100%;
     background: url("https://beeimg.com/images/u55763270542.jpeg")
      no-repeat center / cover;
    /* 그림자 처리 */
    &:after {
     content: "";
     position: absolute;
      background: url("https://beeimg.com/images/u55763270542.jpeg")
      no-repeat center / cover;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 20px; /* 그림자 노출 정도 */
      transform: scale(0.95); /* 사이즈 조절 */
      filter: blur(10px); /* 그림자의 흐릿함 정도 */
    }
  }
}

 

그림자가 위치에 어느정도 노출될 것인지는 포지션 값 (top, left, right, bottom)과 크기 transform의 scale값을 조절해주시면 됩니다. 

마지막으로 그림자의 흐릿함 정도는 조절하기 위해서는 blur의 radius값 (현재 10px)를 조절하면서 현실적인 그림자 효과를 만들어보시길 바랍니다.

 

마무리는 저희집 귀염둥이