CSS filter 프로퍼티 사용하여 블러 효과 적용하기, blur

CSS의 filter 프로퍼티를 사용하여 블러 효과(Blur effect)를 적용하는 방법에 대하여 알아봅니다.
 
CSS의 filter는 CSS3에서 지원된 프로퍼티로 특정 이미지나 요소에 적용하면 다양한 필터 효과를 적용할 수 있습니다. 쉽게 생각하면 포토샵의 필터 효과들의 일부를 웹에서 구현 가능하도록 도와준다고 생각할 수 있죠.

# CSS Filter Blur 효과 적용

filter에는 여러가지 값들이 사용되지만 blur()는 가장 많이 쓰이는 효과 함수 중 하나입니다. 대상을 흐릿하게 만들어주는 특징이 있는데 문법은 아래와 같습니다.

img { filter: blur(radius); }


위와 같이 radius의 값은 왜곡되는 정도, blur 정도를 말합니다. 값이 커질수록 당연히 더 흐릿하게 보이게 되죠. 그럼 아래에 간단한 예제를 만들고 알아보겠습니다.

! CSS filter blur 예제보기

여기서는 간다하게 원과 사각형을 그리고 해당 요소에 blur 효과를 적용한 뒤 어떻게 다른지 확인해보도록 하겠습니다. 먼저 코드를 살펴보면...

여기서 도형의 모습을 가지는 css를 적용합니다.

이제 다음과 같이 blurEffect라는 임의의 css를 만들어 적용시 blur 효과가 부여되도록 할 것입니다.

이제 코드는 완료되었습니다. 실제로 도형을 웹에 그리고 blurEffect css를 선언할 때와 안 할 때를 비교하면 되겠군요. 아래에서 바로 알아보세요.

! 실제로 웹에 구현된 모습 확인하기, blur Effect

먼저 적용하기 이 전 모습입니다. 적용 후 모습은 클래스에 blurEffect를 추가한 것이 차이점입니다.


blur 효과가 적용된 모습이 확연히 차이가 나타나게 되죠. 여기까지 blur 효과를 적용하는 방법에 대하여 알아보았습니다.