The release of HTML5 and CSS3 was nothing short of an evolutionary leap, yet few designers make very much use of the new features provided by the technology. In part this is because the full potential of HTML5 and CSS3 have been overlooked, so people are continuing to develop more or less the same sites, just with minor differences in coding.
There's nothing especially wrong with that, but there are many things HTML5 and CSS3 make available to you that you could be taking advantage of to create more amazing creations than you ever have before.
Don't ignore the canvas
Getting to grips with the canvas object is one of the most difficult tasks for a new HTML5 coder to do, especially when that coder has previously been coding in other versions of HTML and does not have a background in computer graphics programming.
Learning to use the canvas object, even if you rarely intend to do any drawing, is a valuable skill that every serious coder should take the time to learn. It can be used for all kinds of things including creating animated infographics, slideshows, charts (including interactive charts), and a whole lot more besides.
illustration courtesy of
Using the canvas is simply a matter of creating the object in HTML5 and then populating it with JavaScript. The techniques involved are a topic for another day, but you can already find some tutorials here on this site that will help get you started.
You don't need Flash any more
Most of what we previously used Flash for does not require Flash. Now you can do it all with CSS3 transitions, HTML5 drawing, HTML5 animation, HTML5 video and HTML5 audio.
The only things we're not doing in HTML5 that Flash allowed you to do is spy on your users and violate their privacy, but that is not something you want to do anyway, is it?
Most users found Flash to be very annoying, though most also grudgingly installed it as an inevitable necessity. That was until the serious security risks and privacy problems associated with Flash made it now something that most users either don't install at all, or activate only on a case-by-case basis when it's strictly required for a task they want to perform.
CSS3 gives you new pseudo classes
Some pseudo classes were around in CSS2, but with CSS3 you're able to use important positional pseudo classes to gain more control. Mainly they're used with text, as the pseudo class names indicate: before, after, first-letter, first line…
You also have access to transitions, which can be used to modify anything at all, including text. These transitions animate or transform what the user sees on the screen.
Your web pages can communicate directly with the GPU
You should do this with some caution, as any kind of hardware acceleration is going to drain battery life from mobile devices, but it's still pretty cool that you can do it.
GPU acceleration works when you use transitions, 3D transforms, canvas in 3D mode, and WebGL 3D. The latter is my favorite, but you'll need to do a lot of reading to get to grips with everything involved in WebGL. It will give you a lot of scope for creating animations and games, however.
GPU acceleration doesn't work with older browsers, even if they support HTML5 and CSS3.
gif courtesy of
Use game engines to take the hard work out of 3D graphics
Game programmers have been using game engines since forever to make the task of game programming simpler, but it is only in the past year or two that truly capable HTML5 game engines have emerged that could stand up to the task of creating high quality 3D gaming in a browser based environment.
One of the simplest to get started with is PlayCanvas, and even though it's free to experiment with and really cheap for a personal license, it's no lightweight. Here's Swoop, a game created in PlayCanvas:
And this is RoboStorm:
Could you create games like this? Absolutely, and it's far easier now than it has ever been.
For a retro game building experience, try Construct2 or Construct3. It's got everything you need to start creating games on a drag and drop basis (though some will find this too limiting). You create your games online and people play them online. It's an engine for those who don't know any programming and don't want to bother with learning.
Here's Kiwi Story, an old-school 2D platformer created in Construct3:
You're not limited only to gaming with these engines. For making entire movies and presentations, it would be better to use Blender or Maya, and for games dedicated to a specific platform it will usually be better to use a native programming environment dedicated to that platform. For cross-platform interactive games, story telling, education software, or presentations, the HTML5 engines are an excellent option.
HTML5 and CSS3 give you more power
With HTML5 and CSS3 you now have complete control over every element that appears on your page, including the ability to manipulate each object in practically any way you wish.
While the basic unit of construction is still the rectangle, your websites no longer have to follow rectangular linearity. You can put things on any angle you want, rotate them, skew them, twist them and bend them, and your web browser won't complain a bit.
You can now also control opacity and scaling much more easily than before, and the techniques will work across all the major browsers.
As of the time of writing in early 2018, there are still some issues with scaling between different browsers, with some browsers capable of scaling accurately while others give extremely different results for the same page.
That means that at least for now we are still stuck with having to program different versions of a site if we want to use scaling for responsive purposes.
Fortunately you rarely will ever have a need for that, but sometimes fitting something on the screen no matter how small that screen is will be your primary objective. In those cases, the lack of standardized scaling across different browsers will remain a problem.
Still, these problems are not HTML5 or CSS3 problems, they are problems of the browser developers failing to properly support the features provided by HTML5 and CSS3.
As time goes on, we should see improvements in the browsers, and everything will work as expected. By then it may be time to start learning HTML6 and CSS4, but at least it's a step in the right direction.
header image courtesy of
Comments 0 Responses