Home > Categories > HTML5
Page 1

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+ by...
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 our...
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

Using CSS3 to provide smooth resize effects

Ever noticed if you resize your browser window with Gmail open (or Asana or a host of other sites) the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors. Introduction to @media selectors If you already have a responsive design you'll probably be familiar with @media selectors. If you're not familiar, they are essentially a way of applying specific CSS classes to different...
Read more

jQuery plugin for caching forms using HTML5 local storage

Have you ever started filling out a form or blog post only to have your session to expire or your browser to crash losing all of your work in the process? HTML5 introduced the concept of browser storage mechanisms. HTML5 storage has the ability to store string values in either local or session variables. The localStorage variable can persists across sessions and can be of any size. This behavior is similar to a cookie, however it does not suffer from the same limitations. In this tutorial we'll be utilizing...
Read more