Test Js ruler

Added crosshair

by benedict_chan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="//cdn.rawgit.com/hilliuse/ruler/master/jquery.ruler.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/hilliuse/ruler/master/ruler.css">

<div class="blockwrapper">
    <div class="testblock">Block 01</div>

    <div class="testblock">Block 02</div>
</div>

CSS

.blockwrapper
{
    background-color: #2C3B63;
overflow: hidden;
}

.testblock
{
    //first: content color, second: padding color
    background-color: #ECE59A;
    background:linear-gradient(#ECE59A,#ECE59A)
        , linear-gradient(#FD6E8A, #FD6E8A);    
    background-clip: content-box, padding-box;
    padding: 20px;
    
    border: 20px #848D82 solid;
    
    margin: 20px;
    

    
}

JavaScript

$(document).ready(function(){
    $('body').ruler({
        showCrosshair:true
    });    
});