생활코딩 CSS_10.2 필터(Filter)

10.2 필터(filter)

---

원본 이미지는 유지하면서 코드를 통해서 이미지에 효과를 주는 기능

Vendor prefix

---

• 속성을 실험적으로 지원하는 경우 특정 browser에서 해당 속성을 인식할 수 있도록 붙여주는 접두사
• -vendor_prefix-property: value; 형태로 적는다.
• Browser 마다 vendor prefix를 다르게 해서 적고 마지막에 표준 속성을 적어주어야 한다.

Vendor prefix	browser
-webkit-	Safari, Chrome
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer

필터(Filter)

---

• 속성값으로 적용할 필터의 종류와 적용 값을 적는다. filter: effect(value)
• 이미지 뿐만 아니라 문자에도 적용할 수 있다.
• 자세한 필터종류는 참고의 사이트들을 참고.

img {
    /*image에 grayscale을 100%로 적용*/
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%)
}

h1 {
    /*제목(text)에 blur를 1px로 적용*/
    -webkit-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px);
}

참고

---

• 생활코딩 CSS-필터(filter)
• Filter by MDN web docs
• Image Effects with CSS by Bennett Feely
• Filter by CSS-TRICKS

• 벤더 프리픽스 by TCP SCHOOL