css

CSS - filter 속성

3월 16, 2020
filter 속성은 웹 페이지에 있는 이미지에 필터 효과를 적용할 수 있습니다. 마치 포토샵과 같은 효과를 적용할 수 있습니다. 예를 들어 흐림 효과나 흑백, 그림자나 채도를 조작할 수 있습니다. 페이지가 렌더링되기 전에 요소에 적용됩니다.

형식은 다음과 같습니다.

filter: <filter-function> [<filter-function>]* | none

필터 filter-function 에 사용할 수 있는 함수는 다음 표를 참고합니다.

함 수 설 명
blur() 가우시안 블러(흐림) 효과를 설정. 기본값: 0
값이 없거나 0px이면 변경되지 않고, 값이 커질수록 더 흐려 보임.
음수나 백분율은 허용하지 않고, 픽셀 값으로 설정가능.
brightness()
<number> | <%>		 명도(밝기)를 설정. 기본값: 100%
음수는 사용불가, 0이면 완전한 검은색, 100%에 가까울수록 점점 밝아짐.
(100% 초과하면 더 밝은 이미지가 됩니다.)

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
contrast()
<number> | <%>		 콘트라스트(대비)를 조정. 기본값: 100%
음수는 사용불가. 0이면 검은색이 됨, 100%에 가까울수록 대비를 더 높게 변경함.
(100%를 초과한 이미지는 밝은 부분과 어두운 부분의 차이가 훨씬 커집니다.)

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
grayscale()
<number> | <%>		 회색조(흑백)로 변환. 기본값 0%
0에서 100%에 가까울수록 색상이 사라져 회색이 됨. 100% 초과한 값은 100%로 설정됨.
음수는 사용불가. 0이면 변경되지 않음.
(단, 값을 비우면 100%가 되므로 회색으로 렌더링됩니다.)

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
hue-rotate()
<angle> 각도 값		 이미지에 색조 회전을 적용. 기본값 0 deg
값이 없거나 0 deg 또는 360 deg이면 변경되지 않음.
(최대 회전 각도는 360 deg입니다.)
invert()
<number> | <%>		 색상을 반전. 기본값: 0%
0에서 100%에 가까울수록 반전되어 보임.
음수는 사용불가. 값이 없거나 100%이거나 초과한 값은 100%로 설정됨.
(값이 100%이면 완전히 반전되는데, 이때 이미지가 사진 네거티브처럼 보이게 됩니다.)

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
opacity()
<number> | <%>		 불투명도를 설정. 기본값: 100%
0에서 100%에 가까울수록 불투명해짐. 0은 완전히 투명해짐.
음수는 사용불가. 값이 없거나 100%를 초과한 값은 100%로 설정함.

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
saturate()
<number> | <%>		 채도(포화)를 설정. 기본값: 100%
음수는 사용불가. 값이 없거나 100%이면 이미지가 변경되지 않고, 0이면 완전히 불포화 상태가 됨.
(0에 가까울수록 이미지의 채도가 낮아지고, 100%를 초과하면 이미지의 채도가 높아집니다.)

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
sepia()
<number> | <%>		 세피아 효과를 설정. 기본값: 100%
음수는 사용불가. 값이 없거나 100%를 초과한 값은 100%로 설정됨, 0에서 100%에 가까울수록 세피아로 만듦.

퍼센트 기호 (56%로 표시)로 표현된 값은 10진수 (0.56로 표시)로 표현될 수도 있습니다.
drop-shadow()
<shadow>		 그림자 효과를 설정.
<shadow> = <h-offset> <v-offset> <blur-radius> <color>
  • h-offset: 수평방향 그림자. 필수항목.
      양수이면 오른쪽으로, 음수이면 왼쪽에 그림자를 둠.
  • v-offset: 수직방향 그림자. 필수항목.
      양수이면 아래쪽에, 음수이면 위쪽에 그림자를 둠.
  • blur-radius: 그림자 흐림 정도. 기본 값 0.
      숫자가 커질수록 흐려짐. 음수는 사용불가.
  • color: 그림자 색상.

Ex.1) drop-shadow(5px 10px 20px red);
/* 수평 5px, 수직 10px, 20px 흐림 */
Ex.2) drop-shadow(5px 10px 30px 8px red);
/* 수평 5px, 수직 10px, 30px 흐림, 8px 크기 */
url() SVG 필터를 지정하는 XML 파일의 위치를 참조하며 특정 필터 요소에 대한 앵커를 포함할 수 있음.
(url() 참조 값은 해당 필터 요소의 ID입니다.)

여러 필터를 적용하려면 공백으로 구분하여 함수를 지정하면 가능합니다. 예를 들면 아래와 같이 사용합니다.

filter: blur(10px) brightness(200%) drop-shadow(5px 10px 20px red);


blur();

블러는 이미지를 흐리게 설정할 수 있습니다.

가우시안 블러는 화면의 픽셀 수가 얼마나 많은지를 정의합니다. 반경이 클수록 더 많은 픽셀이 서로 블렌딩되므로 요소가 더 흐려 보이는 효과를 얻을 수 있습니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: blur(0px); }
#bird-02 { filter: blur(4px); }
#bird-03 { filter: blur(7px); }
#bird-04 { filter: blur(.15em); }
</style>

<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">
<img src="bird.jpg" id="bird-04">

시계 방향으로 <0px> <4px> <7px> <.15em>을 적용한 결과입니다. .15em은 15%와 같습니다.



brightness();

이미지의 밝기를 조정하는 함수입니다.

원래 색의 값은 100%인데, 0%에 가까울수록 어두워집니다. 그러나 100%를 초과하면 이미지의 밝기가 훨씬 증가합니다. 예를 들어 값이 200%이면 이미지가 원래보다 두 배 밝게 보입니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: brightness(0); }
#bird-02 { filter: brightness(50%); }
#bird-03 { filter: brightness(200%); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <0%> <50%> <200%>를 적용한 결과입니다.



contrast();

contrast() 필터 함수는 이미지의 대비를 조정합니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: contrast(0); }
#bird-02 { filter: contrast(50%); }
#bird-03 { filter: contrast(200%); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <0%> <50%> <200%>를 적용한 결과입니다.



grayscale();

grayscale() 함수는 흑백 이미지로 변환하는 함수입니다. 0에서 100%에 가까울수록 흑백으로 변환됩니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: grayscale(0); }
#bird-02 { filter: grayscale(25%); }
#bird-03 { filter: grayscale(50%); }
#bird-04 { filter: grayscale(100%); }
</style>

<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">
<img src="bird.jpg" id="bird-04">

시계방향으로 <0%> <25%> <50%> <100%>를 적용한 결과입니다.



hue-rotate();

모든 색상은 색상이 배치되는 각도를 갖습니다. 한 지점(색상)에서 시작한 다음 원을 따라 특정 각도로 이동하면 다른 지점에서 다른 색상으로 끝납니다. 이것을 이해하는 가장 간단한 방법은 <그림 1>과 같은 컬러 휠(Color Wheel)을 상상하는 것입니다.

<그림 1>

색상환의 모든 색상은 색상이 배치되는 각도를 갖습니다. 원의 어느 한 지점(색상)에서 시작한 다음 원을 따라 특정 각도로 이동하면 다른 지점에서 다른 색상으로 끝납니다.

hue-rotate() 필터 기능은 이미지의 각 색상을 선택하고 전달된 각도 값으로 회전한 다음 입력 색상이 새 색상으로 교체된 이미지를 출력합니다. 이미지의 모든 색상이 새로운 색상을 생성하기 위해 동일한 방식으로 이동됩니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: hue-rotate(90deg); }
#bird-02 { filter: hue-rotate(180deg); }
#bird-03 { filter: hue-rotate(225deg); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <90deg> <180deg> <225deg>를 적용한 결과입니다.



invert();

invert() 필터 함수는 이미지의 색상을 반전시킵니다. 함수에 전달된 값은 숫자나 비율을 허용합니다. 값이 100%이면 완전히 반전되고, 0%이면 변경되지 않습니다.

모든 색상이 반전되면 (오래된 비 디지털 카메라에서 생성된 것과 같이) 이미지가 사진 네거티브처럼 보이게 됩니다.

0%에서 100% 사이의 값을 허용하며 0에서 100%로 갈수록 이미지가 반전되어 보입니다. 100%를초과한 값은 허용되지만 브라우저는 100%의 값으로 고정합니다.

invert() 함수에 값이 전달되지 않으면 기본값 100%가 되며 이미지가 완전히 반전됩니다. 그리고 숫자 0은 0%와 같고, 100%는 양수 1과 같습니다. 따라서 56% 입력 값은 .56 과 같습니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: invert(50%); }
#bird-02 { filter: invert(75%); }
#bird-03 { filter: invert(100%); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <50%> <75%> <100%>를 적용한 결과입니다.



opacity();

opacity() 필터 기능은 opacity 속성과 동일하게 동작합니다. 그러나 CSS opacity 속성은 하드웨어가 가속되지 않지만 하드웨어 가속을 사용하여 필터를 구현하는 일부 브라우저는 훨씬 더 나은 성능을 위해 필터 버전의 불투명도를 가속화합니다.

opacity() 필터를 적용하려는 요소가 페이지의 다른 요소 위에 있으면 그 아래의 요소가 투명해지면서 나타나기 시작합니다.

0이면 투명해지고, 100%에 가까울수록 불투명해집니다. 그리고 숫자 0은 0%와 같고, 100%는 양수 1과 같습니다. 따라서 56% 입력 값은 .56 과 같습니다.

<style>
body { background: #000; }
img { width: 300px; padding: 10px; }

#bird-01 { filter: opacity(30%); }
#bird-02 { filter: opacity(60%); }
#bird-03 { filter: opacity(80%); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <30%> <60%> <80%>를 적용한 결과입니다. 투명도를 확인하기 위해 배경을 검은색으로 하였습니다.



saturate();

채도를 설정합니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: saturate(50%); }
#bird-02 { filter: saturate(150%); }
#bird-03 { filter: saturate(300%); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <50%> <150%> <300%>를 적용한 결과입니다.



sepia();

100% 이상의 값은 허용되지만 브라우저는 값을 100%로 설정합니다. 그리고 값이 100% 이면 완전한 세피아 톤이 됩니다.

숫자 0은 0%와 같고, 100%는 양수 1과 같습니다. 따라서 56% 입력 값은 .56 과 같습니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: sepia(30%); }
#bird-02 { filter: sepia(60%); }
#bird-03 { filter: sepia(90%); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">

시계방향으로 <원본> <30%> <60%> <90%>를 적용한 결과입니다.



drop-shadow();

drop-shadow() 필터 요소에 그림자 효과를 적용합니다.

그림자의 처음 두 매개 변수는 필수이며, 세 번째와 네 번째는 선택 사항입니다. 그러나 wbekit 브라우저에서 <color> 값을 생략하면 그림자가 투명해지므로 요소에 영향을 미치지 않습니다.

box-shadow 속성과는 달리 drop-shadow() 함수는 사각형 모양이 아닌 내부 내용에 따라 요소에 그림자 효과를 적용됩니다.

예를 들어 배경이 없는 컨테이너 안에 텍스트가 있는 경우 투명한 배경의 텍스트가 이 요소의 알파 채널을 구성합니다. box-shadow 속성을 적용하면 요소 전체에 직사각형 그림자가 만들어지지만 drop-shadow() 함수는 내부의 내용 (알파 채널)과 유사한 그림자가 생겨 효과가 더 사실적이고 멋지게 보입니다.


다음은 drop-shadow(10px 10px 5px) 필터가 적용되기 전 (왼쪽)과 이후 (오른쪽)에 알파 채널 (투명 영역이 있음)이 있는 이미지를 보여줍니다.


아래 예제는 시계방향으로 <원본> <#bird-01> <#bird-02> <#bird-03>의 값을 적용한 결과입니다.

<style>
img { width: 300px; padding: 10px; }

#bird-01 { filter: drop-shadow(10px 10px); }
#bird-02 { filter: drop-shadow(10px 10px 10px); }
#bird-03 { filter: drop-shadow(10px 10px 10px red); }
</style>

<img src="bird.jpg">
<img src="bird.jpg" id="bird-01">
<img src="bird.jpg" id="bird-02">
<img src="bird.jpg" id="bird-03">



url();

필터에 대한 참조는 SVG 필터를 지정하는 XML 파일의 위치이며 특정 필터 요소에 대한 앵커를 포함할 수 있습니다. 참조된 <filter>요소가 요소가 있는 동일한 페이지의 일부인 경우 url() 참조 값은 해당 필터 요소의 ID입니다.

필터가 존재하지 않는 객체를 참조하거나 참조된 객체가 <filter>요소가 아닌 경우 전체 필터 체인이 무시되고 객체에 필터가 적용되지 않습니다.

.element {
    filter: url(myFilters.xml#effect);
}
.element-2 {
    filter: url(#myFilter);
}

여기서 #myFilter 는 다음과 같은 SVG 필터를 나타냅니다.

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  </filter>
</svg>

하지만 어렵게 표현할 필요는 없습니다. SVG 파일이 분리되어 있고, 이것을 src 속성을 이용해 이미지 파일을 불러오는 것처럼 SVG 를 불러올 수 있습니다.

.element {
    filter: url(super-car.svg);
}

Tag:

0 Comments

0 댓글