퍼블리싱 -6

CSS FILTER

사진 찍을 때 삽입하는 필터의 느낌

/*SVG 필터를 가리키는 URL*/
filter:url("url");
/*blur(흐림)*/
filter:blur(2px);
/*흑백*/
filter:grayscale(50%);
/*밝기*/
filter:brightness(0.5);
/*대조*/
filter:contrast(120%);
/*x축,y축,blur,color*/
filter:drop-shadow(10px 20px 0 rgb(5,5,55,1));
/*HSL Hue Values 각도에 따라 지정된 색상이 나옴*/
filter:hue-rotate(42deg);
/*반전*/
filter:invert();
/*투명도*/
filter:opacity(50%)
/*채도*/
filter:saturate(70%);
/*오래된 사진의 느낌 - 어두운 갈색*/
filter:sepia(100%);

---

다중 값으로도 적용 가능하다

filter:sepia(50%) blur(2px);

---

back-drop filter

<div class="container">
  <img width="300" src="http://www.some.com/wbp/gry/4.jpg" alt="">
  <div class="filter"></div>
</div>

.container .filter{
  position: absolute;
  width: 100px;
  height: 100px;
  border: 4px solid;
  top:50px;
  left:100px;
  backdrop-filter: sepia(100%);
}