[CSS] 클리핑을 활용한 조화로운 이미지 테두리 디자인 모음

Doyeon0430 | 2023년 08월 11일

이번시간에는 css에 클리핑을 활용하여 텍스트 및 이미지를 다양하게 디자인 하겠습니다.

클리핑을 사용하면 기본적인 테두리에서 여러 가지 효과들을 조합할 수 있습니다.

그럼 지금부터 클리핑을 사용해 만들어 본 디자인들을 소개하겠습니다.

이미지 테두리 디자인 - 클리핑 효과 1
이미지 테두리 디자인 - 클리핑 효과 2
이미지 테두리 디자인 - 클리핑 효과 3
이미지 테두리 디자인 - 클리핑 효과 4

1. 이미지 테두리 디자인 - 클리핑 효과 1

첫 번째는 글자안에 이미지를 넣어봤습니다.

-webkit-background-clip에 text를 넣으면 이미지를 삽입할 수 있습니다.

color에 transparent를 입력해야 컬러가 이미지 색상으로 변경됩니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/xxQoLOv"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

2. 이미지 테두리 디자인 - 클리핑 효과 2

두 번째는 박스 모양으로 이미지를 조합해서 디자인했습니다.

background-clip에 content-box를 넣으면 배경 이미지가 영역에만 적용됩니다.

box-shadow로 그림자 효과를 추가해 입체감을 만들어줬습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/KKrjvvx"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

3. 이미지 테두리 디자인 - 클리핑 효과 3

세 번째는 별 모양으로 이미지를 조합해서 디자인했습니다.

clip-path에 polygon으로 별 모양 좌표들을 입력했습니다.

2개씩 묶어 꼭지점에 시작과 끝 부분을 조정하고 오각형으로 총 10개의 좌표를 만들었습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/poQXraq"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

4. 이미지 테두리 디자인 - 클리핑 효과 4

네 번째는 원 모양으로 이미지를 가시적이게 표현했습니다.

-webkit-mask-image를 사용해 원 모양 마스크를 생성할 수 있습니다.

circle at center를 설정해서 원의 중심부로 위치시키고 외곽부로 갈수록 투명해지게 만들었습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/MWzMvzd"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

글을 마치며 css에 클리핑을 사용해 이미지 테두리를 다양하게 나타냈습니다.

댓글이 없습니다.

간편 댓글 작성