CSS3 Checkerboard Tweaked

tweaked version of the original by Lea Verou: http://leaverou.me/2011/02/checkerboard-pattern-with-css3/ I basically combined 2 "gradients" patterns into one. and use two of the identical patterns while the position of one of them shifted. works on Firefox and the recent Webkit Nightly. (I didn't bother on the old webkit syntax)

by Amanda Williamson

HTML

<div class="checkerboard"></div>

CSS

.checkerboard {
    background-image:
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    background-image:
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    background-position:0 0, 6px 6px;
    
    height: 16px;
    width: 30px;
    float: left;
    margin: 10px;
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
}

JavaScript

// Slightly simplified version of the checkerboard, originally created by Lea Verou