Posted By

jntu_gnec on 05/30/12

Tagged

Versions (?)

Last Edited at 05/30/12 04:14am

Statistics

Viewed 535 times

Favorited by 0 user(s)

Related snippets

CSS Chess Board

/ Published in: CSS

Simple CSS Chess Board marked up with tables and styled with CSS3 psuedo classes. Basic use of :nth-child(odd) and :nth-child(even) to achieve the alternate black and white checkboxes. Check out the CSS code - it's dead simple!

Highlighted TextExpand

HTML:
<table> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
</table>

CSS:

body { 
    background: #abdc28; 
    padding: 20px; 
}

table { 
    margin: 0 auto; 
    border-collapse: collapse; 
    background: black; 
} 
td { 
    width: 40px; height: 40px; 
}

tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) { 
    background: white; 
}

URL: http://www.megawrz.com/css/192006-css-chess-board.html

Report this snippet Tweet