We left off from the second post with a game that was fully functional and in this post we’re going to style it. You can view the game by clicking here to get a feel for what we’re going to cover in this post.

We’re aiming for the game to look like the game on the left (shown above) and at the moment we’re looking like the game on the right. Here is a list of the things that we are going to cover in this post.

• Changing the corners on the square (so they’re rounded)
• Adding some spacing above the squares
• Changing the buttons to look more like menu items
• Add a hover effect to the buttons
• Reposition the buttons
• We’re going to animate the click so that the square fades out
• We’re going to fix the h1 tag (adding bits to their own line)
• We’re going to sort the body font
• We’re going to sort the annoying space that is either side of the white stripe (nav menu).

Changing the corners on the square (so they’re rounded)

Fixing the h1 tag

The first thing to do is to align items in the middle of the page and change the background colour of the h1 tag (I chose the colour #49ba86) and then get rid of the black space in the header.

h1 {
	color: white;
	margin: 0;
	background-color: #49ba86;
	text-align: center;
}

Getting rid of the white stripe

Once that was taken care of the gap around the nav menu and the h1 tag was removed by adding a margin of 0 to the body CSS.

body {
	background-color: #232323;
	margin: 0;
}

Sorting out the font

The font families “Arial”, “Montserrat” and “Avenir” were added to the body CSS.

font-family: "Arial", "Montserrat", "Avenir";

This changed the font but didn’t really make the game look like the example game and this is because we still need to adjust the various font weights.

In the case of the h1 font weight, the default for a h1 tag is to have a very heavy font weight so we’re going to change the h1 tag to have a font weight or normal. While we’re still on the h1 tag, the demo has it so all the letters in the h1 tag are uppercase so we’re going to add that as well.

h1 {
	color: white;
	margin: 0;
	background-color: #49ba86;
	text-align: center;
	font-weight: normal;
	text-transform: uppercase;
}

Then we’re going to add breaks in the HTML to break up the words in the h1 tag.

<h1>
   The Great 
   <br>
   <span id="winningColour">RGB()</span>
   <br>
   Game!
</h1>

Lastly I’m going to adjust the styling for the font that displays that winning colour and all I’m going to do is to change the size of it to 200% (as suggested in the course). You can see what the game looks like once this has been done by visiting this link.

#winningColour {
	font-size: 200% ;
}

There is still a bigger space between the lines than in the example so to fix that I reduced line height and added some padding to the top and bottom. Once this has been implemented then the header is complete (have a look by clicking here). The last thing that needs to be fixed is the nav menu.

Sorting out the buttons in the nav menu

The buttons had the following styling added to them:

button {
	border: none;
	background: none;
	text-transform: uppercase;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 1.2;
	height: 100%;
	color: #49ba86;
}

Once that was done, the span tags that contain the message to the user need to be given a width so that the menu items don’t bounce out when the message appears.

#message{
	display: inline-block;
	width: 20%;
}

That brings us really close to a final product. The next thing that needs to be done are all the hover effects in the menu. You can see how close the game is by viewing the latest version by clicking here. We firstly need to add a hover effect and then we’re going to give the same properties of that new hover effect to the existing “active” class that we put on the buttons (as an active button and a hovered button look the same in the example program).

The newly added class is called #message (because we’re dealing with an id) and is shown below.

button:hover {
	color: white;
	background-color: #49ba86;
}

The existing “active” class was also adjusted.

.active {
	color: white;
	background-color: #49ba86;
}

Giving us this version of the program which can be seen by visiting this link. The last things that need to happen are the fading effects on the nav menu and on the squares (at the moment they’re instantly disappearing and will look better with a slight fade). As well as rounding off the squares. Once that is done this game will be finished and all there will be to do left is to tidy up the code we’ve written (which I think I’m going to save for a part 4 of this series).

This was done really simply by adding a transition to the button CSS (which all the nav menu items are) that takes the program 0.3 seconds to fade in (on all the buttons).

transition: all 0.3s;

Sorting out the squares

The last thing that we need to do is to sort out the squares by putting rounded corners on them and getting them to fade out like we just did with the nav menu. The following was added to the CSS.

border-radius: 20%;
transition: background 0.5s;

This time we only needed to add the transition to the background property instead of all of them.

The two transition effects that we just put into the game won’t work in all browsers and to make them work we need to give them an additional property which is only for browser support. Those two properties are:

-webkit-transition:background 0.5s;;
-moz-transition:background 0.5s;;

Once that was done we now have a final version of the “Great RGB Colour Guessing Game”.