CSS CheckerBoard Pattern
Based on Taufik's comment from my CSS Chess Board, this is another submission with 2 different tricks to achieve the same pattern.
The first method uses an approach inspired by Lea Verou's experiment which is basically to use linear-gradient
and background-size
. The background is positioned properly and repeated which produces the pattern.
The second method is the one developed by Taufik that uses lots of box-shadow
declarations with hard coded distances. I don't think this method is much usable for the aforementioned reason and another one which is that as you can see, the actualy div
is still small. The shadows appear but the element itself retains the small height and width which leads to other problems like positioning properly with margin
and so on. You can understand what I am trying to say with more ease by inspecting the second pattern with chrome developer tools or firebug. Being unusable, I still think it's a good trick to share!
UPDATE: The second method is apparently not working in Webkit browsers but works fine in Firefox. I'll try to dig more into this issue asap.