HTML5 posts

How to enhance HTML5 gaming with the Gamepad API

One of the big obstacles in designing a game in HTML5 is that the popular gamepad hardware isn't available. Nobody wants to play a game with keyboard buttons, so the arrival of the Gamepad API brings us a lot closer to console-style gaming in the browser. Browser support ... At the time of writing, the only browsers that support the Gamepad API are Chrome and Firefox — the latest version of each working unprefixed. However, the more we use this API, the more browser manufacturers will support it, and as...
read more

How to use HTML Imports

Web Components have really come a long way since they were first introduced, but one aspect of components that could really change how we code websites is HTML Imports. This way of working allows us to import HTML documents into other HTML documents. It was possible with Ajax, but HTML Imports is a cleaner method. Browser support ... HTML Imports are a very new technology and as of the time of writing, are only supported in Chrome 31 and later. Even then, you’re required to activate the feature. To do so...
read more

Introducing Shadow DOM

The DOM has been a part of our webpages from the beginning, and since the earliest browsers there have always been certain things we wanted, but couldn’t get from the DOM; and other things we wanted to hide. The shadow DOM is designed exactly for that, it hides DOM subtrees under shadow roots, giving you a method of creating a better and more functional encapsulation in the DOM. Browser support ... This functionality is very much new and experimental so it’s only available at the moment in Chrome 25+...
read more

How to use the progress element

When creating a web site we sometimes need to provide the user with feedback on the progress of a particular task , whether that be uploading a file, saving a document or even showing them how much is left until they complete filling in a form. Until now, there has never been a specific HTML element that served this purpose, but now we have the progress element that, as the name suggests, was made to represent the progress of these tasks. Using the progress element ... When it comes to using this element we have...
read more

How to use the Dialog element

In the last couple of years pop-ups and modal boxes have become a lot more popular, and with the HTML5 dialog element we can create easy HTML dialogs and modals without the need for any JavaScript plugins, just simple HTML and some vanilla JavaScript. Since this feature is so new it’s only available in Chrome Canary and even then you need to go to chrome://flags and turn on the Enable Experimental Web Platform Features flag in order for it to work properly. Helpfully there is also a polyfill developed...
read more

HTML5 JavaScript Gem Game With Saved Scoreboard

Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually "not much", everything that I will be using in todays tutorial I've already covered in various different guises in my previous tutorials. We'll be using only pure JavaScript and CSS in this tutorial and the images I've used are from the PlanetCute image pack from Daniel Cook Apologies in advance, but this is a fairly length tutorial....
read more

Using HTML5 Drag And Drop To Create A Shopping Cart

The release of HTML5 introduced native Drag and Drop functionality to modern web-browsers. This means it is now possible to have movable elements on screen without the aid of frameworks like jQuery. This week we'll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we'll cover, will be adding an item to the cart and if it already exists updating the quantity and totals. Getting Started ... The first thing we'll need is a basic structure for...
read more

Introducing CSS3 Multiple Backgrounds

CSS3 introduced a novel concept, the ability to specify multiple, layered background images. This allows you to build up an image using smaller parts to create a more complex image. This feature allows you to have one single element instead of one for each image, it also means you don't have to worry about z-indexing as it is automatic. In this tutorial we'll be creating an animated header using layered background images. We're going to then apply an animation to position everything and add some interactive...
read more
Load more