CSS3에서는 filter 속성 하나만으로 요소에 다양한 시각적 필터 효과를 간단하게 적용할 수 있습니다. 별도의 이미지 편집 프로그램 없이도 흐림, 색상 반전, 밝기 조절 등의 효과를 웹 페이지에서 바로 구현할 수 있어 활용도가 매우 높습니다.
사용 가능한 필터 함수
filter 속성에는 아래와 같은 함수들을 사용할 수 있습니다.
blur() | brightness() | contrast() | grayscale() | invert() | opacity() | saturate() | url();
- blur() : 요소를 지정한 픽셀 값만큼 흐리게 처리합니다.
- brightness() : 요소의 밝기를 조절합니다. 100%가 기본값이며, 그 이상은 더 밝게, 이하는 더 어둡게 표현됩니다.
- contrast() : 명암 대비를 조절합니다.
- grayscale() : 요소를 회색조(흑백)로 변환합니다.
- invert() : 색상을 반전시킵니다. invert(100%)를 적용하면 사진 네거티브 효과처럼 보입니다.
- opacity() : 요소의 투명도를 조절합니다.
- saturate() : 색상의 채도를 조절합니다.
- url() : 외부 SVG 필터 파일을 참조하여 사용자 정의 효과를 적용합니다.
CSS3 필터 효과 예제
다음은 filter 속성을 사용해 이미지에 색상 반전(invert) 효과를 적용하는 예제입니다. 원본 이미지와 필터가 적용된 이미지를 나란히 배치하여 차이를 비교할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
margin: 20px;
width: 200px;
height: 200px;
}
img.normal{
margin-left: 30%;
}
img.filter {
filter: invert(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS3 Filter effect example</h1>
<img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>실행 결과
위 코드를 실행하면 왼쪽에는 원본 이미지가, 오른쪽에는 invert(100%) 필터가 적용되어 색상이 반전된 이미지가 나타납니다. 이처럼 filter 속성을 활용하면 한 줄의 CSS만으로도 인상적인 시각 효과를 손쉽게 구현할 수 있습니다.