Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS CheckerBoard Pattern

    CSSDeck G+