Korean English Japanese

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
이미지에 다양한 필터를 적용할 수 있습니다.

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 속성 브라우저 호환성

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 부분적으로 적용할 경우, 특정 섹션에는 클래스로 선택자를 잡고 적용하면 된다. 한 웹사이트의 전체에 적용할 경우, 아래의 스타일을 그

creativestudio.kr

 

CSS 다중 선택자 참조

CSS 선택자 CSS에서 선택자는 스타일을 설정할 요소를 선택하는 데 사용되는 패턴이다. 대부분의 선택자 요소에 대한 사용법과 설명을 번역 및 이해하기 쉽도록 구분해놓았으므로, 이를 통해 선

creativestudio.kr

 

-webkit-이란 무엇인가?

-webkit- 웹페이지에 적용된 속성을 살펴볼 때 -webkit- 이라는 prefix 가 붙은 속성을 볼 수 있다. 이는 표준화가 되지 않은 새로운 기능들의 속성일 경우 -webkit- 이라는 prefix 를 달고 등장한다는 것이

creativestudio.kr

 

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

CSS 선택자 :nth-child() 사용법 :nth-child( an+b ) :nth-child() 속성은 정말 유용하다. 웹사이트나 스킨을 디자인할 때, 내가 원하는 요소에만 CSS를 편하게 적용할 수 있게 해 준다. 여러 가지 적용방법이

creativestudio.kr

 

참고

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