filter
- 이미지, 텍스트 등 그래픽 대상에게 여러가지 효과를 줄 수 있는 기능
- 포토샵 기능을 하는 속성이라고 할 수 있다.
*codespan이라는 홈페이지를 통해 여러 효과를 참조할 수 있다.
- grayscale, blur 등 다양한 기능이 있다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
transition: all 1s;
/* 장면 전환 - 모든 효과에 대해서 1초 동안에 장면 전환을 한다. */
/* 1초 동안에 걸쳐서 효과가 적용된다. */
}
img:hover {
filter: grayscale(100%) blur(3px);
}
h1 {
filter: blur(3px);
}
</style>
</head>
<body>
<h1>Cute</h1>
<img src="./img/리리.png" />
</body>
</html>
'html & css > 개념' 카테고리의 다른 글
| 움직임 주기 - transition (전환) (0) | 2023.11.28 |
|---|---|
| 변형 (transform) 소개 (0) | 2023.11.28 |
| 배경(background) (6) | 2023.11.28 |
| float 기본 및 응용 (0) | 2023.11.24 |
| 미디어쿼리 기본 (0) | 2023.11.24 |
