so woon!

[속성] filter 속성 본문

CSS/개념정리

[속성] filter 속성

xowoony 2022. 9. 10. 21:01

학습일 : 2022. 09. 07

filter 속성
색상과 관련된 효과(카메라에 있는 그것)를 위해 사용한다.
함수를 이용하며 함수 이용시 공백( )으로 여러개의 함수를 이용할 수 있다. (절대 filter 속성을 여러개 사용하지 않는다.)

 


함수
blur([?px|?rem|...]) : 해당 요소의 내용을 주어진 길이 만큼 흐린다.

brightness([0.0~|0%~]) : 해당 요소의 밝기를 조절한다. 기본 값은 1(혹은 100%)이며 값이 작아지면 어두워지고,
                                       커지면 밝아진다.

contrast([0.0~|0%~]) : 해당 요소의 대비를 조절한다. 기본 값은 1(혹은 100%)이다.

drop-shadow([X축 오프셋 : ?px|?rem|...] [Y축 오프셋 : ?px|?rem|...] [퍼짐 정도 : ?px|?rem|...] [색상])
                                       : 해당 요소의 투명한 부분과 그렇지 않은 부분의 경계에 대해 그림자를 생성한다.

grayscale([0.0~1.0|0%~100%]) : 해당 요소의 회색조를 조절한다.
                                                     기본 값은 0(혹은 0%)이며 값이 커지면 채도가 빠져 흑백 사진이 된다.

invert([0|1|0%|100%]) : 해당 요소를 반전시킨다. 기본 값은 0(혹은 0%)이며 값이 커지면 색이 반전된다.
                                      중간 값을 사용하지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter 속성</title>
    <style>
        .image {
            filter: blur(0.5rem) brightness(50%);❤
        }

        .image:hover {
            filter: invert(100%);❤
        }
    </style>
</head>
<body>
    <img class="image" src="resources/images/t.png">❤
</body>
</html>

===========실행결과============

 

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter 속성</title>
    <style>
        .image {
            filter: contrast(300%);❤
        }

        .image:hover {
            filter: invert(100%);❤
        }
    </style>
</head>
<body>
    <img class="image" src="resources/images/t.png">
</body>
</html>

==============실행결과=============

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter 속성</title>
    <style>
        .image {
            filter: drop-shadow(-1rem 1rem 1rem rgb(0, 0, 0));❤
        }

        .image:hover {
            filter: invert(100%);❤
        }
    </style>
</head>
<body>
    <img class="image" src="resources/images/t.png">
</body>
</html>

===========실행결과===============

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter 속성</title>
    <style>
        .image {
            filter: grayscale(100%);❤
        }

        .image:hover {
            filter: invert(100%);❤
        }
    </style>
</head>
<body>
    <img class="image" src="resources/images/t.png">
</body>
</html>

============실행결과===========

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[속성] transition 속성  (0) 2022.09.10
[속성] transform 속성  (0) 2022.09.10
[속성] z-index 속성  (0) 2022.09.10
[속성] overflow 속성  (0) 2022.09.10
[속성] opacity 속성  (0) 2022.09.10
'CSS/개념정리' Related Articles more
Comments