CSS3 Filters example

by secretgspot

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container-fluid">
<h2>CSS Filter Example</h2>
        <div class="row-fluid">
          <div id="filter" class="span6">
            <input type="range" class="opacity" min="0" max="100" step="0.1" value="100" data-value="0" />
            <input type="range" class="grayscale" min="0" max="100" step="0.1" value="0" data-value="0" />
            <input type="range" class="sepia" min="0" max="100" step="0.1" value="0" data-value="0" />
            <input type="range" class="saturate" min="0" max="200" step="0.1" value="100" data-value="100" />
            <input type="range" class="hue-rotate" min="0" max="360" step="1.0" value="0" data-value="0" />
            <input type="range" class="invert" min="0" max="100" step="0.1" value="0" data-value="0" />
            <input type="range" class="brightness" min="0" max="100" step="0.1" value="0" data-value="0" />
            <input type="range" class="contrast" min="0" max="200" step="1.0" value="100" data-value="100" />
            <input type="range" class="blur" min="0" max="10" step="1.0" value="0" data-value="0" />
            <input type="range" class="drop-shadow" min="0" max="10" step="1.0" value="0" data-value="0" />
          </div>
          <div class="span6">
            <img src="http://www.html5rocks.com/en/tutorials/filters/understanding-css/images/peppers.jpg" />
          </div>
        </div>
</div>

CSS

.row img {
  width: 340px;
  float: left;
}
#filter input {
  width: 200px;
  display: block;
  position: relative;
  clear: left;
  left: 90px;
  line-height: 0px;
}
#filter input::before {
  content: attr(class)':';
  position: relative;
  left: -100px;
  top: 5px;
  color: black;
  font-weight: bold;
}
#filter input::after {
  position: relative;
  left: 220px;
  top: -13px;
}
#filter input.opacity::after,
#filter input.grayscale::after,
#filter input.sepia::after,
#filter input.saturate::after,
#filter input.invert::after,
#filter input.brightness::after,
#filter input.contrast::after {
  content: attr(data-value)'%';
}

#filter input.hue-rotate::after {
  content: attr(data-value)'deg';
}
#filter input.blur::after {
  content: attr(data-value)'px';
}
#filter input.drop-shadow::after {
  content: attr(data-value)'px 'attr(data-value)'px 10px gray';
}

JavaScript

window.addEventListener('DOMContentLoaded', function() {
  var filters = {
      'opacity': 100,
      'grayscale': 0,
      'sepia': 0,
      'saturate': 100,
      'hue-rotate': 0,
      'invert': 0,
      'brightness': 0,
      'contrast': 100,
      'blur': 0,
      'drop-shadow': 0
  };
  document.querySelector('#filter').addEventListener('change', function(e) {
      var type = e.target.className;
      filters[type] = e.target.value;
      e.target.dataset.value = filters[type];
      var filter = '';
      for (var key in filters) {
        switch(key) {
            case 'hue-rotate':
          filter += key+'('+filters[key]+'deg) ';
          break;
            case 'blur':
          filter += key+'('+filters[key]+'px) ';
          break;
            case 'drop-shadow':
          filter += key+'('+filters[key]+'px '+filters[key]+'px 10px gray) ';
          break;
            default:
          filter += key+'('+filters[key]+'%) ';
          break;
        }
      };
      document.querySelector('img').style.webkitFilter = filter;
  });
});