Breadcrumbs

[comathi]

Note: this tutorial presumes knowledge of CSS. If you need help, consider reading w3Schools' great CSS reference: http://w3schools.com/css/default.asp

Catch the previous tutorial:
Let's Make a Game, Part 1: HTML

Welcome to the second part of this tutorial mini-series. This time, we'll be covering the CSS behind your very own game of Tic Tac Toe. By the end of this tutorial, your game should look somewhat similar to this:


Let's get crackin', shall we ;)

To start off, you'll need to download a few things. They are:

- A pattern for the body background (bg.png);
- A pattern for the game board background (denim.png);
- A font for the title (Keania.ttf);
- A font for the rest of the page (Lato-Regular.ttf)

I've gathered all of these and put them in the zip file below. Just make sure you unzip it all in the same directory as your HTML document.

This file is hosted off-site.

Once you've extracted everything and it's all good, we can start coding

We'll make use of those nice fonts right away. By using @font-face, we can import custom fonts for our website easily.

Code: Select all

@font-face
{
	font-family: Keania;
	src: url('Keania.ttf');
}

@font-face
{
	font-family: Lato;
	src: url('Lato-Regular.ttf');
}

Just to be sure, we'll also remove the padding and margins of all elements:

Code: Select all

*
{
	padding: 0;
	margin: 0;
}

To make the background prettier, we'll also add bg.png as a background image:

Code: Select all

body
{
	background: url('bg.png') repeat;
}

Repeat will make the image repeat both vertically and horizontally. So no matter how small it is, your whole page background will be filled.

Let's tackle the game board, now, shall we (a little more and it will become my catchphrase lol)

For the sole purpose of making everything nice, we'll center the game board, have it a different color background and make it a round rectangle...
-Rounded rectangle, you say?!
Yes, with CSS3, it is now possible to change the radius of a border's corners, allowing us to have rounded rectangles everywhere

Code: Select all

#board
{
	min-height: 700px;
	width: 700px;
	margin: 50px auto 50px auto;
	background: url('denim.png') repeat;
	border: 0px;
	border-radius: 5px;
}

There's a very specific reason as to why we're making it 700 pixels wide, and at least 700 pixels high: this allows us to have three, 200-pixel wide by 200-pixel high, canvases per row, while having enough room to put a 25-pixel margin between them.

We won't be styling the canvases just yet, though, as we're going from top to bottom. The next logical step is therefore the title.

Code: Select all

h2
{
	padding-top: 25px;
	text-align: center;
	font-family: Keania;
	font-size: 30pt;
}

Notice how we're using the font-family we declared earlier on. We're also centering the title and making it bigger.

Canvases are up next, and these are pretty straight forward. We want to make them 200 pixels wide and 200 pixels high, and as stated earlier, leave a 25 pixel margin between them. We're also going to set their backgrounds to the same image as the page body. This will give a transparency effect.

Code: Select all

canvas
{
	height: 200px;
	width: 200px;
	margin: 25px 0 0 25px;
	background: url('bg.png') repeat;
}

The previous code set a 25px margin above and to the right of each canvas. However, if you were to preview the page as it is right now, you would notice that there's a 50 pixel gap to the rigth of the 3rd canvas column. That's where the "first" class comes in. If you remember, we added the class attribute to a few of the canvases in the HTML code.

Code: Select all

.first
{
	margin-left: 25px;
}

The same goes for the last row of canvases, but this time for the bottom margin:

Code: Select all

.last
{
	margin-bottom: 25px;
}	

We're down to the last element of the game: the "Start Over" button. It is contained withing a <div> element, so we'll style that first:

Code: Select all

#options
{
	width: 200px;
	height: 55px;
	margin: 0 auto 0 auto;
}

For the button itself, we'll be using the border-radius again, as well as another CSS3 feature: gradients!

Code: Select all

#reset
{
	width: 200px;
	height: 30px;
	background: -webkit-linear-gradient(bottom, #FBB917, #FFFC17);
	background: -moz-linear-gradient(bottom, #FBB917, #FFFC17);
	background: -o-linear-gradient(bottom, #FBB917, #FFFC17);
	border: 0px;
	border-radius: 2px;
	font-family: Lato;
	color: #262626;
}

Notice background has been repeated three times. That's because gradients aren't yet standard across all browsers. Therefore, webkit-based browsers (such as Chrome and Safari), require the -webkit prefix, Firefox requires -moz and Opera requires -o.

One last element of the game board. To give our button a hover effect, we'll reverse the gradient when the user's mouse hovers over it:

Code: Select all

#reset:hover
{
	background: -webkit-linear-gradient(top, #FBB917, #FFFC17);
	background: -moz-linear-gradient(top, #FBB917, #FFFC17);
	background: -o-linear-gradient(top, #FBB917, #FFFC17);
}

That's it for the CSS code. You can now save your style sheet as a .css, such as "style.css". Make sure you save it in the same directory as your HTML document, and that the style sheet's name corresponds to the filename you stated in the HTML document's head section.

Full code:

Code: Select all

@font-face
{
	font-family: Keania;
	src: url('Keania.ttf');
}

@font-face
{
	font-family: Lato;
	src: url('Lato-Regular.ttf');
}

*
{
	padding: 0;
	margin: 0;
}

body
{
	background: url('bg.png') repeat;
}

#board
{
	min-height: 700px;
	width: 700px;
	margin: 50px auto 50px auto;
	background: url('denim.png') repeat;
	border: 0px;
	border-radius: 5px;
}

h2
{
	padding-top: 25px;
	text-align: center;
	font-family: Keania;
	font-size: 30pt;
}

canvas
{
	height: 200px;
	width: 200px;
	margin: 25px 0 0 25px;
	background: url('bg.png') repeat;
}

.first
{
	margin-left: 25px;
}

.last
{
	margin-bottom: 25px;
}

#options
{
	width: 200px;
	height: 55px;
	margin: 0 auto 0 auto;
}

#reset
{
	width: 200px;
	height: 30px;
	background: -webkit-linear-gradient(bottom, #FBB917, #FFFC17);
	background: -moz-linear-gradient(bottom, #FBB917, #FFFC17);
	background: -o-linear-gradient(bottom, #FBB917, #FFFC17);
	border: 0px;
	border-radius: 2px;
	font-family: Lato;
	color: #262626;
}

#reset:hover
{
	background: -webkit-linear-gradient(top, #FBB917, #FFFC17);
	background: -moz-linear-gradient(top, #FBB917, #FFFC17);
	background: -o-linear-gradient(top, #FBB917, #FFFC17);
}

You are now ready for part 3: JavaScript Check it out!