Paint stencilling with HTML5 canvas

I have recently been playing around with re-writing my Spray paint stencils in Flash using JavaScript and HTML5’s canvas element. One thing I discovered is that since SVGs are natively supported in browsers I can have stencils scaled to any size and remain crisp, unlike the Flash version which used transparent PNGs.

I have implemented stencils, including having a muck layer, and stickers – graphics that you can place and cut out through stencils. When I first started playing around I was writing it all plain JavaScript, but eventually I converted everything over to TypeScript which allowed me to easily separate everything out into their own classes with event listening/dispatching capabilities. Almost mimicking the way things were written in AS3.

Below is a video of the early prototype, I will provide a live demo when it is more ready for public use.

Recreating the Apple Watch UI using a hexagonal grid

Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI.

Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.

And an embedded demo, it works best on a touch screen although not an iPad:

The code can be found at this CodePen.

CSS Diamond grid

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows.

Here is a live demo of the grid:


CSS Hexagonal packed grid

Most grids are square packed – that is each cell is stacked like a block which is great, but if you are after something slightly different maybe you should try a hexagonally packed grid. I will show you how to create a hexagonally packed grid using only CSS. But first, here is the difference between a square and a hexagonal packed grid:


View demo



Slide transition effects with CSS

Here are some slide transition experiments I created using CSS.

View Demo

You can view the source of the demos to see how they were made. They have all been tested and work in all the latest browsers – Chrome, Firefox, IE 10+.

There are 6 in total:

Card fall
Card fall forward
Carousel 3D rotate
Cube rotate
Scale and fade
Vertical 2D Carousel

Melbourne train map in CSS

About three weeks ago I was showing my team at work the london CSS tube map and I jokingly put forward the challenge for the first person to make the Melbourne map in CSS gets a dollar. But after looking at the map properly I realised that it actually wouldn’t be that hard – far easier than the London tube map.

And so three weeks later here it is – the map is built entirely from HTML and CSS. No images were used. It should display correctly in all the latest browsers: Firefox, Chrome and IE 10+.

Click here to view the map in a new window.

A new blog design

PurpleSquirrels has gone responsive. I have just flicked the switch on the new PurpleSquirrels design. The new design – which I have been working on over the last few weeks – is now responsive which will make it much easier to read content on mobile devices as it adapts to smaller screens. I had been wanting to make the blog responsive for quite a while but just hadn’t been able to find the time. I contemplated adding it onto the existing design but I decided it would be more beneficial to redesign the whole blog to make it much simpler.

The previous design used a large ‘hero’ image for the first post on the home page. I have taken this idea and refined it in the new version. Now all posts get a large image on the home page and on single post pages.

Visitors using Chrome will notice the use of blurred images at the top of each page which make the blog header reflect the current post. The blurring has been done using CSS filters so no server side scripts are needed and no extra images are downloaded. Browsers that don’t support it will just see un-blurred images. I quite like the effect – blurred or not – of having every page take on it’s own personality depending on what post you are reading.

One thing I have been taking advantage of a lot lately is the use of the :before and :after pseudo elements to create non-rectangular shapes and so I wanted to include this technique in the redesign. All the angular elements such as the purple post date ribbon and the angular post image have been created using purely in CSS using pseudo elements and borders. No images required!

In fact the only images used in the blog template is the PurpleSquirrels logo (a long version and a short version). The logo is an SVG so it should appear nicely on all devices.

On the single post pages I have added next post and previous post buttons which stick to the sides of the screen. They appear as just arrows and slide out when you mouse over them. They have been created purely from CSS.

The final major change is the slide down header that appears once you scroll past the main header, this allows you to access the menu and home page without having to scroll back to the top.

I have also dropped support for IE8 and below – supporting older browsers severely restricts the use of new technologies and I believe holding on to the past just prevents the web from moving forward. If we keep supporting old browsers then where’s the incentive to upgrade, right?

I hope you like the new design. It gave me a chance to utilise some new techniques I’ve learnt, some of which I wouldn’t get a chance to use in client work.

Webcam to canvas or data URI with HTML5 and Javascript

This post has been sitting around unfinished since April so I thought I should finish it and get it out there.

In this post I am going to show how you can capture an image from a webcam via JavaScript and convert it to a Data URI which can then be saved in a database or displayed in an IMG tag.

Note: This is more of a proof of concept rather than a best practices example so the code is a bit messy and hacked together from various sources.

I have only tested this on Safari for iOS 6 and latest Chrome with a webcam. It may or may no work in other browsers.

View demo

All explanations for the the code and markup are in the code comments, so please read them for more detail.


Creating HTML5 widgets for Adobe Captivate 6/7

I decided to write this post due to the frustration and lack of information out there on how to make HTML5 widgets for Adobe Captivate. There is almost no documentation on this and the only useful article I could find was riddled with mistakes. My approach may not be the best but this should get you started.

First things first, you will need to make two versions of your widget – a SWF version and a HTML5 version. Even if you don’t plan on using the SWF version, it is required during authortime in Captivate and is where you can provide the edit mode GUI.

These two versions are packaged up into a .wdgt file which is just a zip file with the extension changed to wdgt.


Hover shine effect with pure CSS

This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works.

Live demo:

Click Me

Simple HTML markup:

<div class="myButton">Click Me</div>

And the CSS:

/* normal button style */
.myButton {
    width: 110px;
    height: 30px;
    text-align: center;
    color: #FFF;
    position: relative;
/* button hover style if required */
.myButton:hover {
/* generated element for shine effect.
 * normal state is semi-transparent
 * white but with zero width. Set no
 * transition here for no mouse-leave
 * animations. Otherwise the effect
 * will play in reverse when your mouse
 * leaves the element

.myButton:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
/* on hover we animate the width to
 * 100% and opacity to 0 so the element
 * grows and fades out

.myButton:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;