CSS3 filter 속성과 함수 및 예제

HTML5이나 CSS3를 처음 시작했을 때 너무 어려워서 어떻게 공부를 시작해야 하는지 감이 안 왔던 적이 있습니다. 그렇다고 시간이 지나서 어떤지를 묻는다면 여전히 너무 어려워서 미칠 것 같다.라고 말할 수밖에 없을 것 같습니다. CSS는 CSS1부터 CSS2.1 그리고 현재 CSS3으로 꾸준히 개발되었습니다.

웹 개발을 할 때 화면을 아름답게 꾸며주는 스타일 시트 언어인 CSS3를 공부하는 것은 필수라고 할 수 있겠죠. 그만큼 이전 버전에서 어렵게 구현할 수밖에 없었던 부분들이 순차적으로 새로운 것들이 개발되면서 이제는 매우 쉽게 화면을 꾸밀 수 있는 방법들이 많아졌습니다. 그러한 것들 중 하나가 바로 filter 속성입니다.

이미지를 매우 쉽게 다룰 수 있습니다.

 

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 다중 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

 

이미지에 다양한 필터를 적용할 수 있습니다.

CSS3 filter

어렵게 생각할 것도 없겠죠. 속성을 추가하면 위와 같이 이미지를 다양한 느낌으로 표현할 수 있습니다.
이러한 원리를 응용해서 :hover 등의 속성을 추가한다면 더 생생한 느낌을 구현할 수 있겠죠.

 

1. CSS3 filter 함수 활용

종류	설명
none	기본값, 이펙트 제거
blur(px)	이미지 흐림효과 값이 클수록 흐림이 더 많이 생성, 값을 작성하지 않으면 0으로 지정
brightness(%)	이미지 밝기 조정 0%는 완전히 검게 처리, 100%는 기본값, 100%보다 크면 밝은 효과
contrast(%)	이미지 대비 조정 0%는 완전히 검게 처리, 100%는 기본값, 100%보드 크면 더많은 대비를 처리
drop-shadow(x y blur 색상)	이미지 그림자 효과 x, y는 그림자의 위치를 지정, blur는 흐림정도, 색상은 그림자색상처리
graysclae(%)	이미지 회색으로 전환 0% 기본값, 100%는 이미지를 완전 회색 처리, 음수는 없음
hue-rotate(deg)	이미지 색조 회전 0deg - 360deg
invert(%)	이미지 색상 반전 0%는 기본값원본, 100%는 이미지를 완전히 반전
opacity(%)	이미지 투명도 지정 0% - 100%, 100%가 기본값
saturate(%)	이미지 채도 지정 0%는 이미지의 채도를 완전 없앰, 100%가 기본에 원본, 100%를 초과하면 채도높임
sepia(%)	이미지 세피아톤 변환 0% - 100%, 0%가 기본에 원본
url( )	url( )함수는 SVG필터를 지정하는 XML파일의 위치를 가져올 수 있습니다. 특정 필터요소에 대한 경로를 포함합니다.

 

2. CSS3 filter 속성 브라우저 호환성

인터넷 익스플로러를 제외한 대부분의 브라우저와 호환합니다.

 

3. 필터 함수의 적용 예제

.class {
  filter: grayscale(50%);
}

/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */
img {
  filter: grayscale(0.5) blur(10px);
}

 

4. SVG 필터의 적용 예제

URL 함수와  SVG 필터를 활용하는 방법은 아래와 같습니다.

.target {
  filter: url(#c1);
}

.class {
  filter: url(commonfilters.xml#large-blur);
}

filter 속성은 다양한 그래픽 효과를 요소에 적용할 수 있습니다. 이미지를 흐림 처리를 했다가 마우스를 가져다 대면 선명하게 만들 수도 있고, 그 반대의 경우도 가능합니다. 뿐만 아니라 흑백 이미지와 선명한 이미지를 대비시켜 보여주고자 하는 이미지를 포커싱할 수도 있을 것입니다.

쓰임새가 많은 속성인 만큼 외워두면 많은 도움이 될 것이라 생각됩니다.

 

같이보기

스크롤바 없애는 CSS

CSS 다중 선택자 참조

-webkit-이란 무엇인가?

CSS 선택자 :nth-child() 사용법

 

참고

MDN Web Docs : filter - CSS: Cascading Style Sheets | MDN