In this post, I’ll continue on discovering what animations can be applied to HTML elements. I’ll be looking at 2D transformations; effects that move, rotate, skew, and scale elements.
Year: 2012
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.
Drawing a Lego brick with HTML & 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 🙂
Drawing triangles with CSS
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.
HTML5 Canvas: Save & 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.
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.
HTML5 Canvas: Shadows
In this post, I shall be looking at applying shadows to shapes and text within a Canvas. Shadows can be applied to any shape and can be given a colour, offset from the shape they are applied to and the blur of the shadow controlled.
HTML5 Canvas: Patterns
Patterns in the form of repeating images can be applied to shapes and outlines of shapes within a Canvas. In this post I shall be exploring the steps to achieve this.