CSS visual diff against a mockup

CSS visual diff against a mockup.markdown

CSS visual diff against a mockup

See http://franklinta.com/2014/11/30/image-diffing-using-css/

Forked from Franklin Ta's Pen CSS visual diff against a mockup.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<img id="logo"
     src="https://www.google.com/images/srpr/logo11w.png"
     height=95
     width=269 />
<div>
    <input id="search-input"/>
</div>
<div>
    <button id="search-button">Google Search</button>
    <button id="lucky-button">I'm Feeling Lucky</button>
</div>

script.js

// Overlay the mock with inverted colors
var mockUrl = 'https://dl.dropboxusercontent.com/u/42955681/blog/2014-11-30/google-mock.png';
var mock = $('<img>')
    .attr('src', mockUrl)
    .css({
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'right': 0,
        'margin': 'auto',
        'z-index': 10000,
        'pointer-events': 'none',
        'filter': 'url(#invertFilter)',
        '-webkit-filter': 'url(#invertFilter)',
        //'-webkit-filter': 'invert(100%) opacity(50%)',
    })
    .appendTo('body');
$("<svg xmlns='http://www.w3.org/2000/svg'><filter id='invertFilter' color-interpolation-filters='srgb'><feColorMatrix color-interpolation-filters='srgb' in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0 0.5'/></filter></svg>").appendTo('body');




// Simulate what fiddling with stuff in inspector might look like
var animateLoop = function() {
  $('#logo, #search-button, #lucky-button').css('margin', 0);
  $('#search-input').css('height', 'auto');
  
  new jQuery.Deferred().resolve()
    .then(function() {
      return $('#logo')
        .animate({
          margin: '42px 0 19px'
        }, {
          duration: 2000,
          easing: 'easeOutElastic',
        });
    })
    .then(function() {  
      return $('#search-input')
        .animate({
          height: 26,
        }, {
          duration: 2000,
          easing: 'easeOutElastic',
        });
    })
    .then(function() {  
      return $('#search-button, #lucky-button')
        .animate({
          margin: '16px 6px',
        }, {
          duration: 2000,
          easing: 'easeOutElastic',
        });
    })
    .then(function() {
      animateLoop();
    });
}
animateLoop();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

body {
    position: relative;
    min-width: 700px;
    text-align: center;
}

#logo {
    margin: 42px 0 19px;
}

#search-input {
    width: 566px;
    height: 26px;
    border: 1px solid #d8d8d8;
}

#search-button, #lucky-button {
    background: #f5f5f5;
    background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(241, 241, 241));
    background-image: -moz-linear-gradient(50% 0%, #F5F5F5, #F1F1F1);
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    color: #444;
    font: bold 11px/27px Arial, sans-serif;
    height: 29px;
    margin: 16px 6px;
    padding: 0 8px;
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />