Recent articles

CSS3

Animation with CSS3: Simple transitions 0

Animation with CSS3: Simple transitions

CSS3 is exciting (well at least I think so :)), as it allows animations to be carried out on HTML elements to move them, change their colour and size, etc. In this post, I’ll be looking at the basics of how CSS3 transitions work, with a few examples along the way.

Read full article
Illustration

Strawberry cupcake illustration 0

Strawberry cupcake illustration

I really wanted to draw something with Adobe Illustrator, as I hadn’t used it in an age and I was fearing that I had forgotten how to use it, so I went on the hunt for something fun to draw. Seeing as I like cakes and bright colours, a cupcake was perfect :)

Read full article
CSS3

Drawing a Lego brick with HTML & CSS3 3

Drawing a Lego brick with CSS3

I wanted to challenge myself to draw something with CSS, using some properties at my disposal from CSS3 like gradients, rotation, skew and border-radius. I needed something relatively simple to attempt to draw, and as I frequently think about toys, a Lego brick seemed a good option :)

Read full article
CSS

Drawing triangles with CSS 1

Drawing trangles with CSS and HTML

Believe it or not, triangle shapes can be drawn with pure CSS, no images needed. In this post I’ll be explaining how different types of triangles can be drawn with a clever little trick involving borders on an element.

Read full article
HTML5 Canvas

HTML5 Canvas: Save & restore 0

HTML5 Canvas: Save and restore

Here I am going to explain save and restore within a Canvas as best I can. Without a doubt, this was the hardest thing to get my head around, so it’ll certainly be useful to explain here what it could be used for, why it is useful, and how to implement it.

Read full article
HTML5 Canvas

HTML5 Canvas: Transformations 0

HTML5 Canvas: Transformations

With transformations, shapes drawn upon a Canvas can be moved to another spot on the Canvas, rotated, enlarged and reduced in size. I’ll be looking at how these transformations are achieved in this post, and explaining how they are applied.

Read full article