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 Kieran Dang

CSS

body {
  background-color: white;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .2)), -webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .2) 50%, rgba(200, 0, 0, .2));
  
  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .2) 50%, rgba(200, 0, 0, .2));
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .2) 50%, rgba(200, 0, 0, .2)), linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .2) 50%, rgba(200, 0, 0, .2));
  
  -pie-background: linear-gradient(transparent 50%, rgba(200, 0, 0, .2) 50%, rgba(200, 0, 0, .2)) 0 0 / 50px 50px, linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .2) 50%, rgba(200, 0, 0, .2)) 0 0 / 50px 50px white;
  
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;
  -webkit-background-size: 41px 41px;
  background-position: 0 0, 20px 20px;
}

JavaScript

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