[css] 렌즈 왜곡 필터

22 Dec 2023

이번 포스트에서는 CSS의 렌즈 왜곡 필터를 사용하여 멋진 효과를 만드는 방법에 대해 알아보겠습니다.

읽을 내용

렌즈 왜곡 필터는 이미지나 요소를 렌즈 효과처럼 왜곡시키는 CSS 필터 중 하나입니다. 이것은 마치 물방울을 통과한 듯한 시각적인 효과를 만들어줍니다.

렌즈 왜곡 필터를 적용하려면 아래와 같이 간단한 CSS를 사용합니다.

.element {
  filter:  blur(5px) saturate(150%);
}

위 코드에서 filter 속성을 사용하여 blur와 saturate 함수를 이용하여 렌즈 왜곡 효과를 만들 수 있습니다. blur 함수는 요소를 흐릿하게 하고, saturate 함수는 요소의 색상을 풍부하게 만들어줍니다.

렌즈 왜곡 필터에는 여러 가지 매개변수를 사용하여 다양한 효과를 만들 수 있습니다. 예를 들어, blur 함수의 매개변수를 조절하여 흐린 정도를 조절할 수 있고, saturate 함수의 매개변수를 조절하여 요소의 색상을 조절할 수 있습니다.

이렇듯 CSS의 렌즈 왜곡 필터를 사용하여 다채로운 시각적 효과를 만들어볼 수 있습니다. 이 기술을 활용하여 웹 디자인에 독특한 느낌을 불어넣어보세요!