250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

커리까지

[생활코딩] CSS 수업 - filter 본문

CSS

[생활코딩] CSS 수업 - filter

목표는 커리 2021. 3. 31. 08:48
728x90
SMALL
  • 원본 이미지를 그대로 유지하면서 효과로 조절
<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                transition: all 0.5s;
            }
            img:hover{
                -webkit-filter: grayscale(100%) blur(2px);
                -o-filter:  grayscale(100%) blur(2px);
                filter:  grayscale(100%) blur(2px);
            }
            h1{
                -webkit-filter: blur(2px);
                -o-filter:  blur(1px);
                filter:  blur(1px);
            }
        </style>
    </head>
    <body>
        <h1>펭하</h1>
        <img src="20200116_002721.jpg" alt="">

    </body>
</html>

  • filter가 여러가지 인 이유는 filter 가 아직 들어온지 얼마 안 되서 브라우저마다 지원이 다르다. 그래서 크롬이나 사파리, 다른 것들을 적용하기 위해서 앞에 장식자를 붙여준 것이다.

  • transiton은 바뀌는 시간을 주는 것이다.

728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 - blend 2 : background-blend-mode  (0) 2021.04.02
[생활코딩] CSS 수업 - blend 1 : 소개  (0) 2021.04.01
[생활코딩] CSS 수업 - 배경  (0) 2021.03.30
[생활코딩] CSS 수업 - float 2 : holy grail layout  (0) 2021.03.29
CSS 수업 - float 1  (0) 2021.03.26
'CSS' Related Articles more
Comments