html & css/개념
필터(filter)
Doo Hee
2023. 11. 28. 22:49
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>