CSS3 Chess Board

Notice: I have gotten a few requests to use this code in personal projects. My short answer is ABSOLUTELY! Please use this code however you need to and if you can figure out a way to link back to this site that doesn’t make your project look silly then please do. Enjoy!

I was browsing the web today and found something exciting.  I noticed that there are unicode characters for chess pieces.  Always looking for ways to play with CSS3 I decided to try and build a chess board using my new best friend :nth-child and some unicode characters.

The Characters:

♔ = ♔
♕ = ♕
♖ = ♖
♗ = ♗
♘ = ♘
♙ = ♙
♚ = ♚
♛ = ♛
♜ = ♜
♝ = ♝
♞ = ♞
♟ = ♟

I always get excited when I find cool characters to play with and these are no different.  Now that I had all the pieces I needed I started to build out the chess board.

The HTML:

First I created a quick table to hold all the chess cells and then added my chess pieces as anchors so I could add some fun drag/drop support.

<table id="chess_board" cellpadding="0" cellspacing="0">
	<tr>
		<td id="A8"><a href="#" class="rook black">&#9820;</a></td>
		<td id="B8"><a href="#" class="night black">&#9822;</a></td>
		<td id="C8"><a href="#" class="bishop black">&#9821;</a></td>
		<td id="D8"><a href="#" class="king black">&#9819;</a></td>
		<td id="E8"><a href="#" class="queen black">&#9818;</a></td>
		<td id="F8"><a href="#" class="bishop black">&#9821;</a></td>
		<td id="G8"><a href="#" class="night black">&#9822;</a></td>
		<td id="H8"><a href="#" class="rook black">&#9820;</a></td>
	</tr>
	<tr>
		<td id="A7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="B7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="C7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="D7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="E7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="F7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="G7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="H7"><a href="#" class="pawn black">&#9823;</a></td>
	</tr>
	<tr>
		<td id="A6"></td>
		<td id="B6"></td>
		<td id="C6"></td>
		<td id="D6"></td>
		<td id="E6"></td>
		<td id="F6"></td>
		<td id="G6"></td>
		<td id="H6"></td>
	</tr>
	<tr>
		<td id="A5"></td>
		<td id="B5"></td>
		<td id="C5"></td>
		<td id="D5"></td>
		<td id="E5"></td>
		<td id="F5"></td>
		<td id="G5"></td>
		<td id="H5"></td>
	</tr>
	<tr>
		<td id="A4"></td>
		<td id="B4"></td>
		<td id="C4"></td>
		<td id="D4"></td>
		<td id="E4"></td>
		<td id="F4"></td>
		<td id="G4"></td>
		<td id="H4"></td>
	</tr>
	<tr>
		<td id="A3"></td>
		<td id="B3"></td>
		<td id="C3"></td>
		<td id="D3"></td>
		<td id="E3"></td>
		<td id="F3"></td>
		<td id="G3"></td>
		<td id="H3"></td>
	</tr>
	<tr>
		<td id="A2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="B2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="C2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="D2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="E2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="F2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="G2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="H2"><a href="#" class="pawn white">&#9817;</a></td>
	</tr>
	<tr>
		<td id="A1"><a href="#" class="rook white">&#9814;</a></td>
		<td id="B1"><a href="#" class="night white">&#9816;</a></td>
		<td id="C1"><a href="#" class="bishop white">&#9815;</a></td>
		<td id="D1"><a href="#" class="king white">&#9813;</a></td>
		<td id="E1"><a href="#" class="wife white">&#9812;</a></td>
		<td id="F1"><a href="#" class="bishop white">&#9815;</a></td>
		<td id="G1"><a href="#" class="night white">&#9816;</a></td>
		<td id="H1"><a href="#" class="rook white">&#9814;</a></td>
	</tr>
</table>

The CSS:

a {
	color:#000;
	display:block;
	font-size:60px;
	height:80px;
	position:relative;
	text-decoration:none;
	text-shadow:0 1px #fff;
	width:80px;
}
#chess_board { border:5px solid #333; }
#chess_board td {
	background:#fff;
	background:-moz-linear-gradient(top, #fff, #eee);
	background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
	box-shadow:inset 0 0 0 1px #fff;
	-moz-box-shadow:inset 0 0 0 1px #fff;
	-webkit-box-shadow:inset 0 0 0 1px #fff;
	height:80px;
	text-align:center;
	vertical-align:middle;
	width:80px;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
	background:#ccc;
	background:-moz-linear-gradient(top, #ccc, #eee);
	background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
	box-shadow:inset 0 0 10px rgba(0,0,0,.4);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}

I started by using some CSS3 gradients, which I recently posted about, but the exciting thing here is the really cool use of the :nth-child pseudo selector. At first I just used the :nth-child(odd) on the table cell, but that created an evenly distributed zebra stripe effect. I was able to flip it and reverse it nth-child style by applying the reverse on the table row.

#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd)

What this gives me is the staggered tiling of the rows.  From there I added some box-shadow properties to make the darker tiles seem depressed and the white tiles I added a 1px inset white shadow to act as a highlight.

I can not say enough about box-shadow, text-shadow and gradients.