Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Webkit Filters</title>
  
  <style>
    body { padding-top: 50px; text-align: center; }
    img { margin-bottom: 30px; }
    li { list-style: none; }
  </style>
​
</head>
<body>
  
  <h1> Must Be Using <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a> To See Effects </h1>
   <iframe src="http://10.203.2.71:8080/upload/images/ys/Dy.001/vtour/tour.html" width="100%" height="100%" frameborder="0"></iframe>
  
​
  
  <form>
    <ul>
      <li>
        <label>Saturation: </label>
        <input id=saturate type=range min=0 max=1000 value=100 class="filter">
      </li>
      
      <li>
        <label>Hue Rotate: </label>
        <input id=hue-rotate type=range min=0 max=1000 value=100 class="filter">
      </li>      
      
      <li>
        <label>Grayscale: </label>
        <input id=grayscale type=range min=0 max=100 value=0 class="filter">
      </li>
      
      <li>
        <label>Sepia: </label>
        <input id=sepia type=range min=0 max=100 value=0 class="filter">
      </li>  
      
      <li>
        <label>Brightness: </label>
        <input id=brightness type=range min=0 max=100 value=100 class="filter">
      </li>    
      
      <li>
        <label>Contrast: </label>
        <input id=contrast type=range min=0 max=1000 value=100 class="filter">
      </li>   
      
      <li>
        <label>Invert: </label>
        <input id=invert type=range min=0 max=200 value=0 class="filter">
      </li>       
    </ul>
    
    <a href="#" id="getCSS">Get CSS</a><br>
    <a href="#" id="reset">Reset</a>
  </form>
  
  <h5>By <a href="http://net.tutsplus.com">Jeffrey</a> </h5>
</body>
</html>
 
(function() {
  
  var ifream = $('ifream'),
      styling = '';
  
  addOrReplace = function() {
    var regex = new RegExp(this.id, 'i'),
        search,
        incrementType;
    
    if ( this.id === 'hue-rotate') incrementType = 'deg';
    else incrementType = '%';
  
    if ( regex.test(styling) ) {
     search = new RegExp(this.id + "[^ $]+", 'i');
     styling = styling.replace(search,  this.id + "(" + this.value + incrementType + ")");
      
    } else {
      styling += " " + this.id + "(" + this.value + incrementType + ")";
    }
    
  
    // "just in case" spacing case cleanup
    styling = styling.replace(/\s\s/, ' ');
    
    // Apply the CSS
    img.css('-webkit-filter', styling);
    
  };
  
  // When range is adjusted
  $('.filter').change(addOrReplace);
  
  
  // When they want the CSS.
  $('#getCSS').click(function(e) {
    alert('-webkit-filter: ' + styling + ';');
     e.preventDefault();
  });
  
  $('#reset').click(function(e) {
    history.go(0);
    e.preventDefault();
  });
​
})();
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers