CSS 필터(Filter) : 이미지에 필터 적용하기

이번에는 이미지수정없이 css으로 필터를 적용하는 방법을 기록합니다.

 

 

• blur(): 이미지나 요소에 블러(흐리게) 효과를 줍니다.
• brightness(): 이미지나 요소의 밝기를 조정합니다.
• contrast(): 이미지나 요소의 대비를 조정합니다.
• grayscale(): 이미지를 흑백으로 변환합니다.
• sepia(): 이미지에 세피아(갈색 톤) 효과를 줍니다.
• hue-rotate(): 이미지의 색상을 회전시킵니다.
• saturate(): 이미지의 채도를 조정합니다.
• invert(): 이미지의 색상을 반전시킵니다.
• drop-shadow(): 이미지나 요소에 그림자를 추가합니다.
• opacity(): 요소의 투명도를 조정합니다.

See the Pen Untitled by 김보라 (@etbeatbh-the-bashful) on CodePen.

 

 

1. blur()

• 범위: 단위가 픽셀(px)로, 최소값은 0px(블러 없음), 최대값은 제한이 없으나 너무 큰 값은 실질적으로 의미가 없게 됩니다.
• 예시: blur(0px) (블러 없음), blur(10px) (10픽셀의 블러 효과)

2. brightness()

• 범위: 0%에서 무한대(∞)까지. 100%는 원본 밝기, 0%는 완전한 검은색, 200%는 두 배 밝기입니다.
• 예시: brightness(0%) (완전 검은색), brightness(100%) (원본 밝기), brightness(200%) (두 배 밝기)

3. contrast()

• 범위: 0%에서 무한대(∞)까지. 100%는 원본 대비, 0%는 완전한 회색(중간 회색), 200%는 두 배의 대비를 의미합니다.
• 예시: contrast(0%) (완전 회색), contrast(100%) (원본 대비), contrast(200%) (두 배 대비)

4. grayscale()

• 범위: 0%에서 100%까지. 0%는 원본 색상, 100%는 완전한 흑백입니다.
• 예시: grayscale(0%) (원본 색상), grayscale(100%) (완전 흑백)

5. sepia()

• 범위: 0%에서 100%까지. 0%는 원본 색상, 100%는 완전한 세피아 톤입니다.
• 예시: sepia(0%) (원본 색상), sepia(100%) (완전 세피아 톤)

6. hue-rotate()

• 범위: 각도 단위(deg)로, 0deg에서 360deg까지. 0deg는 원본 색상, 360deg는 원본 색상으로 돌아옵니다. 음수 값도 가능하며, 이는 반대 방향으로 색상이 회전합니다.
• 예시: hue-rotate(0deg) (원본 색상), hue-rotate(180deg) (180도 회전한 색상)

7. saturate()

• 범위: 0%에서 무한대(∞)까지. 100%는 원본 채도, 0%는 무채색(흑백), 200%는 두 배의 채도입니다.
• 예시: saturate(0%) (무채색), saturate(100%) (원본 채도), saturate(200%) (두 배 채도)

8. invert()

• 범위: 0%에서 100%까지. 0%는 원본 색상, 100%는 완전 반전 색상입니다.
• 예시: invert(0%) (원본 색상), invert(100%) (완전 반전 색상)

9. opacity()

• 범위: 0%에서 100%까지. 100%는 완전 불투명, 0%는 완전 투명입니다.
• 예시: opacity(100%) (완전 불투명), opacity(0%) (완전 투명)

10. drop-shadow()

• 범위: 위치와 크기, 블러의 수치는 픽셀(px) 단위로 설정하며, 색상은 색상 값을 지정합니다. 이 효과의 수치에는 고정된 최소 또는 최대 값이 없으며, 픽셀 값과 색상으로 구성됩니다.
• 예시: drop-shadow(5px 5px 10px black) (5픽셀 우측, 5픽셀 아래에 10픽셀 블러의 검은 그림자)