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.

32 thoughts on “CSS3 Chess Board

  1. Pingback: jQuery’s .delegate() | Design in Development

    • Yes, please feel free to take this code and make it your own! Post back when you get something, I’d love to link over to it.

      • I plan to do a web application as a school project. The project should contains some score handling and replaying and this is a very good way how to do a chessboard. So thanks about sharing your idea! :)

  2. Wow, that’s a clever use of the new CSS3 properties!

    Works amazingly well in latest Firefox 3.6.6 on Win7! :)

    Congratulations! That’s a fine example that will stand proudly in one line with the CSS3 Opera Logo, the CSS3 Twitter Fail Whale, and the CSS3 iPhone!

    Hats off!

  3. As I recently made the characters from PacMan in pure CSS, it seems we are in similar situations. We have the pieces to fun games but they still lack the ability to be played.

    Click the link above to see the PacMan and Friends… Mrs. PacMan is possibly coming soon.

  4. Pingback: 12 Most Interesting CSS 3 Effects

  5. Greatly enjoyed this article Seth! I especially like the use of gradients and :nth-child(even/odd) selectors.

    I also wanted to alert you to an error found in your HTML code although it doesn’t affect your presentation:

    As the queen always starts on her color and the king on the opposite, the correct values for D8 & E7 are the black Queen & King respectively while D1 & E1 are the white Queen & King.

    This makes the unicode numbering more apparent with the Kings starting at #9812 (white) & #9818 (black) followed by the Queens at #9813 & #9819, the Rooks at #9814 & #9820, and so on.

    Thanks again for the great article!

    P.S. Sorry if this seems nit-picky but the horseman is a “knight”.

    • Mr. Anderson. (in matrix style voice):

      Thanks for the feedback. I I’ll make sure to update that very soon! Thanks for pointing it out.

  6. I’m working on a chess variation called “kriegspiel” (same as regular chess, except you can’t see your opponent’s pieces!), and I’ve used this design. I haven’t gotten around yet to hiding the pieces, so right now it’s basically regular chess… that, and I haven’t implemented check, mate, or en passant yet. It’s still a work in progress. But feel free to check it out, the board implementation itself is in CoffeeScript, with a JavaScript client talking to a node.js server.

  7. I haven’t checked in here for a while since I thought it was getting boring, but the last several posts are great quality so I guess I will add you back to my daily bloglist. You deserve it friend :)

  8. Be aware that Chrome does not show unicode/encoding (utf-8) characters in its default fonts, so be sure to modify the style=”font-family: Meiryo” in perhaps the parent tag

    Otherwise you’ll have to get every person to modify their browser settings to change the default encoding from ‘WESTERN ISO-8859-1′ to ‘UTF-8′ under Chrome

  9. Very nice! I programmed an endgame solver (chess in 2 moves) and plan to port it to java script. This table would be a very nice graphical interface. Can I use it for that application? I will put in a link to this side and a reference to you.

  10. Please feel free to use anything on this blog that you would like. Make sure you post back with a link to your site so I can take a peek at how you used it. I’d love it see it.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>