·

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

This page may contain links from our sponsors. Here’s how we make money.

There are not as many newer gaming fansites that utilize the power of HTML5 and CSS3 techniques. Some of the more popular gaming titles such as Final Fantasy and Kingdom Hearts have a devoted following. A large fan base will accompany forums and other online message boards – but this isn’t always the most successful CMS solution.

In this tutorial, I want to demonstrate how we can build a simple retro Pokemon fansite layout using some newer CSS3 tricks. To keep the template fairly simple I haven’t included any extra jQuery effects. Although admittedly there is plenty of room for such a system of dropdown menus or sliding panels on the home page. Additionally, I’ve included a few sprite resources ripped from the first 2 generation games.

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

Download Source Code

HTML5 Doctype and CSS Fonts

We can first take a peek at the page header and internal meta tags. I’ve set up the webpage using an HTML5 doctype and also configured the viewport meta tag values. Mobile users will experience a similar layout style, or can even alternatively port to a mobile-specific design.

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Responsive Game Fansite Demo Page</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link href='http://fonts.googleapis.com/css?family=Acme|Gorditas' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
</head>

A few tags down in the header code I’m including two separate stylesheets. The first is named styles.css which includes all the basic page defaults. Underneath I have an external reference to a customized Google Fonts stylesheet including two font families “Acme” and “Gorditas”. This is a simple method of using open CSS fonts for building out your own unique design.

Notice that I’m also including some external libraries only if the browser version is less than Internet Explorer 9. There have been countless bugs found inside IE which do not properly render some of the new HTML5 elements. This code is a nice solution for true backward compatibility.

External Page Structure

Inside the body element, I’ve wrapped all the content inside a div container with the ID “wrapper”. This is important because we want to support a specifically limited width for smaller browsers and larger monitor resolutions. Then everything inside the wrapper will appear fluid up to a certain breakpoint.

<header>
	<h1>Pokémon Fansite</h1>
</header>

<nav>
	<ul>
	    <li><a href="#">Home</a></li>
	    <li><a href="#">About Us</a></li>
	    <li><a href="#">Gen I R/B/Y</a></li>
	    <li><a href="#">Gen II G/S/C</a></li>
	    <li><a href="#">Graphics</a></li>
	    <li><a href="#">Links</a></li>
	    <li><a href="#">Contact</a></li>
	</ul>
</nav>

The top page section is using the header and nav HTML5 elements. This makes CSS targeting much easier because we don’t need to label IDs or classes. Also, our logo inside the h1 tag is using a custom imported font, which I’ll explain in more detail later on.

None of the navigation links go anywhere since I haven’t built any internal pages. Much of the core body content consists of paragraph tags and header elements. When launching your own ideas it’s possible to build off so many other variations, including 2 or 3-column layouts.

<footer>
	<span class="copy">All graphics and media © Nintendo and GameFreak. This demo fansite is not affiliated with Nintendo.</span>
	<ul class="footlinks">
	    <li><a href="#">Homepage</a></li>
	    <li><a href="#">About</a></li>
	    <li><a href="#">Staff</a></li>
	    <li><a href="#">Affiliates</a></li>
	    <li><a href="#">Site Terms</a></li>
	    <li><a href="#">Links</a></li>
	    <li><a href="#">Contact Us</a></li>
	</ul>
</footer>

This last bit of code is found after the whole body content section. I’m using an HTML5 footer tag to encapsulate the copyright byline and other important website links. Using this doctype it’s a whole lot easier following the standard regulations to create a systematic website schematic.

Designing with CSS3

There are plenty of examples inside the default stylesheet which reference newer CSS3 properties. I’d like to first point out some of the basic resets which I’ve included from the start.

/** @group elements **/
* { margin: 0; padding: 0; }
html { font-size: 62.5%; }

::selection {background: #c0e9b0; }
::-moz-selection { background: #c0e9b0; }

body { display: block; background: #c7f090 url('img/noise-bg.png'); padding: 0px 35px; }

img { max-width: 100%; }

p { display: block; font-family: Arial, Tahoma, sans-serif; color: #343434; font-size: 1.3em; line-height: 1.4em; margin-bottom: 12px; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/** @group structure **/
#wrapper { display: block; margin: 0 auto; max-width: 920px; min-width: 300px; }

header {
display: block;
height: 140px;
position: relative;
background: url('img/pokemon-classic-banner.png') no-repeat;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-webkit-box-shadow:  2px 1px 2px  rgba(40, 40, 4, 0.65);
box-shadow:  2px 1px 2px  rgba(40, 40, 4, 0.65);
}

Common practice suggests removing all the default margins and padding from all browser systems. I have reapplied some of this padding on the body element, and we’re using a custom tiled background image. You may notice the ::selection target is being used to override the highlight effect. As you select text on the page you’ll get a bright green background instead of the typical blue highlight.

Also, the header element acts as a banner for the page itself using one long background image. I’ve combined the overworld map sprites into a long image with the max width set to 920 pixels. To add some extra special styles I’ve applied a slight box shadow and rounded border effect.

Custom @font-face Import

The top header tag displays some very unique custom CSS3 styles. We can accomplish this by importing various font type files of the same name displayed as one font family. In this case, I’m using Ketchum which matches a similar style to the original Pokemon logo.

/** @group font-face **/
@font-face {
font-family: 'ketchum';
src: url('fonts/ketchum.eot?') format('embedded-opentype'),
url('fonts/ketchum.woff') format('woff'),
url('fonts/ketchum.ttf') format('truetype');
}

In the root directory of this template I have created a sub-folder named “fonts”. We need to include at least one of the EOT, TTF, WOFF, or SVG file types. I used a fantastic online tool for converting web fonts which is free for so many daily uses. Configuring the Ketchum font in our stylesheet means I can reference the font-family value anywhere in the document.

header h1 { font-family: 'ketchum', Arial, sans-serif; color: #5e85cc; font-size: 3.2em; font-weight: normal; text-shadow: 3px 3px 0px #eee, 5px 5px 0px #808080; }
header h1 { position: absolute; top: 10px; left: 60px; letter-spacing: 0.1em; }

Notice that I’ve also applied a bubbly shadow effect which appears from behind the logo text. Just between these two effects, we can build a truly dynamic logo that looks great rendered inside the browser window. It’s certainly not a technique that can work on every website. But it’s considerably more user-friendly and offers an exceptional demonstration of custom CSS font techniques.

Navigation Links

There are only two important sections covering the nav links. First is directly underneath the header area where I’m using one of our custom Google fonts, and again underneath the page footer.

/** @group navigation **/
nav { display: block; padding: 10px 8px; }
nav ul { display: block; list-style: none; }

nav ul li { display: inline-block; font-size: 1.95em; font-family: 'Gorditas', Tahoma, sans-serif; }
nav ul li a { display: inline-block; margin-right: 2px; color: #fff; text-shadow: 1px 1px 1px rgba(55, 100, 120, 0.7); padding: 5px 11px; color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
nav ul li a:hover { background: #95d958; text-decoration: none; color: #526742; text-shadow: 0px 1px 0px rgba(55, 100, 120, 0.7); }

Each anchor element behaves as a block with an invisible background setup. As you hover across the links each font changes to a much darker color and a more vivid shade of green. The dynamic font choice along with dark text shadows makes this navigation menu really pop. And it’s super easy to customize your own dropdown menu or sub-level links accordingly.

/** @group footer **/
footer { display: block; padding: 10px 12px; padding-bottom: 35px; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }

footer .copy { font-size: 1.1em; color: #323232; }
footer ul { list-style: none; }
footer ul li { display: inline; font-size: 1.3em; }
footer ul li a { display: inline-block; padding: 4px 0px; margin-right: 8px; color: #fff; text-shadow: 1px 1px 1px rgba(55, 100, 120, 0.7); }

footer ul li a:hover { text-decoration: underline; }

In a similar design fashion, the footer links are split as block level elements floating in a single row. However, I’ve gone with a simpler approach in just keeping the text underline on hover state. The footer area is generally a location for site-related management links. This can mean they do not require as much attention or flamboyant personalization compared with other menus.

Headings and Sprite Icons

One last bit of code to look over surrounds the different internal page headers. I’ve incorporated a few different classes onto the h1 elements which appends a different background image on the left side.

Using this set of classes we can build a whole library of custom headers with pixel-based icons. By default, I’ve set up four classes using a Pikachu, Chansey, Snorlax, and typical Pokeball icon. But obviously, you could choose to mix-and-match with your own favorite overworld sprites.

#content h1 { font-family: 'Acme', Trebuchet MS, Arial, sans-serif; color: #565656; font-weight: bold; font-size: 2.1em; letter-spacing: 0.07em; text-shadow: none; margin-bottom: 7px; }

#content h1.pika { padding-left: 20px; background: url('img/pikachu-sprite.png') 0px 5px no-repeat; }
#content h1.chansey { padding-left: 20px; background: url('img/chansey-sprite.png') 0px 5px no-repeat; }
#content h1.snorlax { padding-left: 20px; background: url('img/snorlax-sprite.png') 0px 5px no-repeat; }
#content h1.ball { padding-left: 20px; background: url('img/pokeball-sprite.png') 0px 6px no-repeat; }

One last important point to notice is that I’m using our custom Acme font for all content headings. It may be difficult adding these individual icons based on which font stacks you apply. This is definitely a cool effect that you don’t find everywhere. But try not to go overboard with the pixel sprites, because in excess the style can feel repetitive and sometimes distracting.

Final look at the pixel-style game fansite

Download Source Code

Conclusion

All the code for this layout is fairly easy to understand for beginner-to-intermediate web developers. I hope this tutorial can offer inspiration for gamers and passionate webmasters across the globe. There is plenty of room on the Internet for similar websites devoted to even less popular gaming titles. Feel free to download my source code and play around with the template styles on your own.

For more coding tutorials, please see:

Get the Free Resources Bundle