CSS - filter 효과 예제

CSS3 필터를 재미있게 사용할 수 있는 몇 가지 예를 보여 드리겠습니다.

원본 이미지

Blur();

.blur {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}

Brightness();

.brightness {
  filter: brightness(0.9);
}

Contrast();

.contrast {
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}

Grayscale();

.grayscale {
-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

Hue-rotate();

.hue-rotate {
-webkit-filter: hue-rotate(185deg);
    filter: hue-rotate(185deg);
}

Invert();

.invert {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

Saturate();

.saturate {
  -webkit-filter: saturate(200%);
          filter: saturate(200%);
}

Sepia();

.sepia {
  -webkit-filter: sepia(80%);
          filter: sepia(80%);
}

Url();

<style>
#svg-filter { display: none; }

img { display: block; width: 90%; }
img { -webkit-filter: url(#svg-blur); }
</style>
<img src="super-car.jpg" />

<svg id="svg-filter">
  <filter id="svg-blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
  </filter>
</svg>

멀티 필터 예제

여러 필터를 결합하여 흥미로운 효과를 만들 수 있습니다 .

Contrast + Grayscale

.multiple1 {
  -webkit-filter: contrast(1.9) grayscale(1);
  filter: contrast(1.9) grayscale(1);
}

Invert + Hue-rotate

.multiple2 {
  -webkit-filter: invert(90%) hue-rotate(175deg);
  filter: invert(90%) hue-rotate(175deg);
}

Brightness + Saturate + Contrast + Hue-rotate

.multiple3 {
  -webkit-filter: brightness(0.7) saturate(150%) contrast(190%) hue-rotate(30deg);
  filter: brightness(0.7) saturate(150%) contrast(190%) hue-rotate(30deg);
}

애니메이션 필터

필터는 애니메이션이 가능하므로 흥미로운 효과를 얻을 수 있습니다.

<button>Click to Animate</button>
<img src="super-car.jpg" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

img { display: block; width: 500px; }
img.animated { -webkit-animation: filter-animation 5s infinite; }

@-webkit-keyframes filter-animation {
  0% { -webkit-filter: sepia(0) saturate(2); }  
  50% { -webkit-filter: sepia(1) saturate(8); }  
  100% { -webkit-filter: sepia(0) saturate(2); }
}
</style>
<script>
function activateFilterAnimation() {
  $('img').toggleClass('animated');
}

$('button').on('click', activateFilterAnimation);
</script>

참고 : alligator.io, css-tricks.com