Web Development

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

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

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

Happy New Year!

Well it’s now 2014 and it’s looking to be a great year. I have a trip to Canada planned which will be exciting. I bought a new camera just before Christmas – a Sony A7R – which I am loving so far. I can’t wait to take it over to Canada. I am hoping the […]

January 1, 2014

Inspiring Inspiration #12

A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…

September 20, 2013

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

September 2, 2013

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

August 28, 2013

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 The code Simple HTML markup: And the CSS:

April 24, 2013

Using PHP to dynamically display the current year

Update 20-9-1012: As Kimonoki pointed out in the comments, this can actually be done in one line. There is no need to store the $time variable as the second parameter for date() is optional and defaults to time(). I have updated the snippet below. I am posting this for reference for myself as I find […]

August 22, 2012