Posted By

jntu_gnec on 05/30/12

Tagged

Versions (?)

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

Statistics

Viewed 717 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!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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

Comments

Subscribe to comments

Comment:

You need to login to post a comment.