Chessboard in CSS

This is my first attempt at CSS and I’m glad that the end result is satisfactory. As soon as I finished learning the basics, I got the idea of creating a chessboard (or checkerboard) using CSS — after all, I’ve been getting too much inspiration lately. The following tutorial is quite easy to do and is aimed at beginners.

Creating the board — There are multiple ways of doing this and one can use div or table to get the end result. I used table. The first step involves creating an 8×8 table. This can be done using the <table></table> tags and inserting 8 cells (td’s) in each row (tr) and doing the same thing 8 times. Though it may seem long, it’s just a simple copy-paste job (and there’s no alternative either).

Single Row (to be placed between <body> and </body> tags ):
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

Once you’re done with the 8×8, it’s time for styling using CSS. For this board, the length of each square is taken as 50px with a silver colored solid border of 1px size.

CSS:

td
{width:50px;
height:50px;
border:1px silver solid;
text-align:center; (Text align is necessary for a proper alignment of unicode)
font-size:40px;}(Font size for the unicode characters)

table tr:nth-child(odd) td:nth-child(even) {
background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
background: #000;
}

As you can see, the board makes use of nth-child selector to select alternate <td>s and <tr>s. Without that, we’ll end up having a board that has the same initial pattern getting repeated 8 times.

One can find all the individual chess pieces in unicode. So, we can add additional identifiers to place the chess pieces on the board. Using gradients to fill in the checks is the most effective way; but because I used black and white, the unicode characters are red and green for this example. One can replace the chess pieces with circles and arrange them accordingly to get the checkers board.

Here’s the complete code along with the end result.

http://jsfiddle.net/7GmCv/ (or) http://jsfiddle.net/sarath_a/gvZNA/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s