[javascript] CSS 이미지 필터 (image filters)

참고: https://levelup.gitconnected.com/css-image-filters-e549271864f7

"필터" 라는 단어를 들으면 가장 먼저 떠오르는 것은 인스타그램 필터일 것 입니다. 아니면 당신을 코첼라 가는 강아지로 바꿔주는 스냅쳇 필터일 것 입니다. 이 포스트에서는 CSS를 사용하여 앱의 이미지에 매혹적이고 세련된 효과를 줄 수 있는 filter 속성에 대해 알아보겠습니다.

사용할 수 있는 필터는 다음 10 가지 입니다:

• grayscale()
• sepia()
• blur()
• invert()
• opacity()
• saturate()
• contrast()
• brightness()
• hue-rotate()
• drop-shadow()

위의 모든 메소드에서 Chrome 이나 Safari의 경우 -webkit-filter를 사용하고 Firefox의 경우 -moz-filter를 사용합니다.

Grayscale

.grayscale {
  filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
}

grayscale은 이미지에서 색상을 제거합니다. 전달된 매개변수는 원하는 회색 효과의 양입니다. 퍼센트 또는 십진수로 입력되며 0% 또는 0은 변화 없음 이고, 100% 또는 1은 완전한 회색조를 나타냅니다.

Sepia

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

또 다른 잘 알려진 필터 세피아는 이미지에 "aged" 효과를 줍니다. 매개변수는 퍼센트 또는 십진수 형식으로 지정할 수 있으며 0%, 0 을 전달하면 변경 없음 이고, 100%, 1은 완전한 세피아 적용 입니다.

Blur

.blur {
  filter: blur(2px);
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px)
}

블러 효과는 이미지에 가우시안 블러 효과를 생성합니다. 여기서 가우시안 분포는 정규 분포입니다. 이에 따라 이미지는 가우시안 함수에 대한 표준편차로 나타납니다. 즉, 매개변수로 받은 픽셀 값은 얼마나 많은 화면 픽셀이 혼합될지를 나타내므로 값이 커질 수록 블러가 더 많이 생성되며 0은 변화없음 입니다.

Invert

.invert {
  filter: invert(.9);
    -webkit-filter: invert(.9); 
    -moz-filter: invert(.9)
}

invert는 반전이라는 의미로 이미지의 모든 색상 값을 색상환의 반대 값으로 설정합니다. 흰색은 검은색으로, 녹색은 보라색으로, 주황색은 파란색이 됩니다. 값은 퍼센트, 소수점 형식으로 지정되며 0%, 0은 변경 없음 이고 100%, 1은 이미지를 완전히 반전시킵니다.

Opacity

.opacity {
  filter: opacity(.5);
    -webkit-filter: opacity(.5); 
    -moz-filter: opacity(.5)
}

opacity는 이미지의 투명도를 설정합니다. 매개변수는 퍼센트, 소수점 형식으로 지정되며 0%, 0은 완전히 투명하게 하고 100%, 1은 변경 없음을 의미합니다.

Saturate

.saturate {
   filter: saturate(10);
    -webkit-filter: saturate(10); 
    -moz-filter: saturate(10)
}

saturate는 채도라는 의미로 이미지의 색상 강도를 높입니다. 값은 퍼센트나 소수점 형식으로 지정합니다. 0%, 0은 "un-saturated" 상태이며 회색 효과가 나타납니다. 100%, 1은 변화 없는 상태이고 이를 초과하는 값은 "super-saturated" 상태로 색상 강도가 높아집니다.

Contrast

.contrast {
   filter: contrast(4);
    -webkit-filter: contrast(4); 
    -moz-filter: contrast(4)
}

contrast는 대비를 의미하고 이미지에서 다양한 색조의 시각적 비율을 말합니다. 이 차이는 이미지의 텍스처, 하이라이트, 그림자, 색상 및 선명도를 설정합니다. 0%, 0은 회색 이미지를 생성합니다. 100%, 1은 변경 없음을 의미합니다. 100%, 1을 초과하는 값을 전달하면 대비가 증가합니다.

Brightness

.brightness {
   filter: brightness(2);
    -webkit-filter: brightness(2); 
    -moz-filter: brightness(2)
}

밝기 필터는 이미지를 밝게 하거나 어둡게 합니다. 매개변수 값은 퍼센트 또는 소수점 형식으로 지정하며 0%, 0은 검은색으로 보이게 하고 100%, 1은 변경 없음 입니다. 100%, 1을 초과하는 값은 이미지를 밝게합니다.

Hue-rotate

.hue-rotate {
   filter: hue-rotate(270deg);
    -webkit-filter: hue-rotate(270deg); 
    -moz-filter: hue-rotate(270deg)
}

hue rotate는 색상환에 따른 색조 회전을 합니다. 이 값은 색상환에 따라 이미지의 색상을 각도로 변경합니다. 0은 변경 없음 이고 최대 값은 360deg 까지 허용됩니다.

Drop-shadow

// syntax
drop-shadow(offset-x offset-y blur-radius spread-radius color)

// css
.shadow {
  filter: drop-shadow(16px 16px 10px red);
   -webkit-filter: drop-shadow(16px 16px 10px red);
   -moz-filter: drop-shadow(16px 16px 10px red);
}

그림자 필터는 이미지 모양에 맞는 흐릿한 오프셋 그림자를 만듭니다. 효과는 이미지 뒤에 표시되며 따로 색상을 적용할 수도 있습니다.

그림자 필터의 문법은 다른 필터 보다 좀 더 복잡합니다:

offset-x, offset-y (필수): 그림자의 오프셋을 결정하는 두 개의 길이 값 입니다. offset-x는 수평 거리이며 음수를 설정하면 왼쪽에 그림자를 배치합니다. offset-y는 수직 거리이며 음수로 설정하면 그림자는 위에 표시됩니다. 두 값을 모두 0으로 설정하면 그림자는 이미지 바로 뒤에 위치합니다.

blur-radius (옵션): 그림자의 흐림 반경을 나타내는 값으로 값이 커질 수록 그림자가 더 크고 흐려집니다. 기본 값은 0 이며 이는 그림자를 표시하지 않습니다.

spread-radius (옵션): 그림자의 확산 반경으로 양수 값은 그림자를 확장하고 음수 값은 그림자를 축소합니다. 지정하지 않으면 기본 값은 0이고 그림자의 크기는 이미지와 같은 크기가 됩니다.

color (옵션): 그림자의 색

Multiple Filters

하나의 이미지에 여러 필터를 함께 사용할 수 있습니다. 이 때 필터의 순서는 중요치 않습니다.

정리

다음의 codepen에서 자세한 코드를 확인할 수 있습니다.

See the Pen image filter by shinyks (@shinyks) on CodePen.