Posted By


jntu_gnec on 05/30/12

Tagged


Statistics


Viewed 523 times
Favorited by 0 user(s)

CSS Chess Board


/ Published in: CSS
Save to your folder(s)

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!


Copy this code and paste it in your HTML
  1. HTML:
  2. <table>
  3. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  4. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  5. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  6. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  7. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  8. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  9. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  10. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  11. </table>
  12.  
  13.  
  14.  
  15. CSS:
  16.  
  17. body {
  18. background: #abdc28;
  19. padding: 20px;
  20. }
  21.  
  22. table {
  23. margin: 0 auto;
  24. border-collapse: collapse;
  25. background: black;
  26. }
  27. td {
  28. width: 40px; height: 40px;
  29. }
  30.  
  31. tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
  32. background: white;
  33. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.