Advanced Search

Return to Snippet

Revision: 57515
at May 30, 2012 04:14 by jntu_gnec
Initial Code 
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; 
}
Initial URL 
http://www.megawrz.com/css/192006-css-chess-board.html
Initial Description 
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!
Initial Title 
CSS Chess Board
Initial Tags 
css
Initial Language 
CSS