A simple HTML5 Game tutorial – Part 1

I’ve always wanted to create a game. It seems the older I get the closer I get. This post is the first in a small series which walks you through the steps I followed to create a simple game. Here is a taster of the end result:

A simple game create using HTML's canvas and JavaScript
Screenshot of HTML5 game

Continue reading “A simple HTML5 Game tutorial – Part 1”

Advertisements

CSS3 animated social cube mash-up

Several brilliant examples of CSS3 animations have caught my eye recently. There are some clever people out there producing cutting-edge examples rich with beautiful animations. I thought I’d mix a few ideas together to produce a 3D spinning globe using CSS3 and JQuery. The final result is here and a screen shot follows:

Cube spinning using  CSS3 technology

Continue reading “CSS3 animated social cube mash-up”

CSS3 cork board with sticky notes!

CSS is rather useful these days.  With the web getting more visual each day CSS3 is taking a central role in visualizing data.  Within this post one covers the basics to create a  This could be used to display your facebook friends, latest tweets or a virtual to-do list. Lets’s start with a screen-shot of the finish product:

css3-message-board-with-sticky-notes

Continue reading “CSS3 cork board with sticky notes!”

3 Step CSS Animation Tutorial

CSS3 includes the ability to animate elements using nothing more that pure CSS – no JavaScript or Flash required.  An animation is defined as the transition of an element moving from one state to another.  For example a simple square can be move from one position to another using CSS e.g.

CSS Animation illustration Continue reading “3 Step CSS Animation Tutorial”

Swinging with HTML5 and CSS3 transitions

Several of my previous posts focused on the canvas feature of HTML5. In this post I’ve moved focus onto the features of CSS3 and how these can be used interactively within HTML5. There are many CSS3 properties. This post covers the joys of using CSS3’s transitions. As of writing this post the transitions are only fully implemented within FF, Chrome and Safari. The transitions do work to a degree within IE9; however, the end product is rather shabby. One suggests viewing the final example in one of the three aforementioned browsers.
The aim of this post is to produce a swinging sign. The momentum of the swing should be controlled by the user. Let’s start by looking at a screen shot of the final product.

CSS3 transitions