HTML | Tutorial Blog

Create an HTML5 Canvas Tile Swapping Puzzle

February 02, 2012 Tutorial Blog No comments

In this Tutorial we will be working with the HTML5 canvas and Javascript to create a dynamic tile swapping game. The result will be a puzzle that works with any given image, and has flexible difficulty levels that are easily adjusted.

An Introduction to the HTML5 Gamepad API

January 23, 2012 Tutorial Blog No comments

As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter for both us developers and our end players. One of these is the GamepadAPI, which allows you to connect your good old console gamepad into your computer and use it for browser based games, plug and play style. Let’s dive in!

Slopy Elements with CSS3

December 25, 2011 Tutorial Blog No comments

It’s always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only.

Falling Snow Effect with CSS Keyframe Animations

December 23, 2011 Tutorial Photoshop No comments

Merry Christmas and Happy new year to you all! The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. Do you like snow? How about putting some snow on your website with a couple of simple lines of code?

Getting Started With EaselJS: A Flash-Like Interface for the HTML5 Canvas

December 14, 2011 Tutorial Blog 3 Comments

There’s been some resistance from Flash developers to our new HTML5 content. In this article – aimed at experienced AS3 coders – we’ll look at EaselJS, a JavaScript library that makes working with the HTML5 canvas very similar to working with the Flash display list.

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

December 08, 2011 Tutorial Photoshop No comments

In this Tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following…

A Bunch of Cool CSS Animations with Animate.CSS

November 18, 2011 Tutorial Blog No comments

Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.

CSS animations are supported in Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft have also promised support for Internet Explorer 10, and support has been announced for Opera 12.

Making a CSS3 Animated Menu

November 17, 2011 Tutorial Blog No comments

In this short Tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.

HTML5 Avoider Game Tutorial: Multiple Moving Enemies

October 30, 2011 Tutorial Blog No comments

In the first part of this series, you learned the basics of using JavaScript and the canvas element to make a very simple HTML5 avoider game. But it’s too simple – the single enemy doesn’t even move – there’s no challenge! In this Tutorial, you’ll learn how to create a never-ending stream of enemies, all falling from the top of the screen.