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 […]

February 28, 2015

Triggering a ‘finish’ event on an external video with Storyline HTML5

If you have at some point needed to use Articulate Storyline – you have probably come to a point where you want to murder everyone around you (not literally of course!) due to its ridiculous, quirky limitations. More often than not I find myself hacking the published code to make things works how I want. […]

February 18, 2015

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 […]

February 14, 2015

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 […]

February 13, 2015

Inspiring Inspiration #15

A collection of cool video, motion graphics and interface design.

February 4, 2015

A LESS mixin for a transition with a prefixed transition-property

The most common mixin you will find in LESS for CSS3 transitions is something like the following: The proplem with this is that if you want to transition a property that requires a prefix such as transform: You will end up with: This is not what you want, you need to have the transition-property prefixed […]

January 9, 2015

Nobody Tells This To Beginners

This little video by Saar Oz of Creavite has a great message and some fantastic animation – check it out below.

January 6, 2015

Accessing command line arguments with Grunt

I needed to be able to set up a watch task with Grunt to only watch a specific client sub directory. This directory would change depending on the client I was working on and new clients were constantly added so I need a way to watch the specific client that I was working on only, […]

September 23, 2014

Local AJAX calls with IE11

Here is a little snippet to get local AJAX (with jQuery) working when running content locally in IE 11. Local content is not allowed to use the XMLHttpRequest but it can use the proprietary ActiveXObject, so this tells jQuery to always use the ActiveXObject if it’s available. I needed to use this to run local […]

June 12, 2014

Creating a dynamic progress bar in Storyline

Disclaimer: The techniques in this article access areas of the Storyline JavaScript output which are neither documented nor officially supported. Have you ever tried to implement a custom progress bar in your Storyline projects? If you have, then you will be aware of the difficulty of implementing such a feature. It usually involves setting up […]

March 26, 2014

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 […]

March 3, 2014

A great talk on web accessibility

I found this talk on web accessibility which goes through some tips and techniques to make life easier for people with various disabilities such as visual and hearing impairments and reduced motor skills.