Category Archives: HTML/CSS

Create a sprite sheet walk cycle using using CSS animation

The CSS steps() function is something that I think is going to be really useful in the future when it’s supported in all the browsers. One thing I’m a big fan of is using CSS to move and redraw DOM … Continue reading

Posted in HTML/CSS | Tagged | Leave a comment

An animated expanding search input is easy with the CSS focus pseudo-class

The great thing about CSS is when you can do something with it, it usually only takes a couple of lines. Recently, I was helping on a project and it had a little effect on the search input where it … Continue reading

Posted in HTML/CSS | 1 Comment

Recreate the 3D slider effect from the Android home page

I think I’ve mentioned on here before that once in a while I’ll see an effect on a web page and I’ll become obsessed with how it was down. The latest thing to catch my attention is the 3D slide … Continue reading

Posted in HTML/CSS | Tagged , | Leave a comment

Why I used the Flexible Box Model in my blog redesign

This week I redesigned my blog and I decided to used the CSS3 flexible box model to control the positioning of most of the elements. If you’ve taken a look at it, the flexible box model is a great addition … Continue reading

Posted in HTML/CSS | Tagged , , | Leave a comment

Build a vertical scrolling shooter game with HTML5 canvas – Part 6

Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading

Posted in HTML/CSS | Tagged , , , | 5 Comments

Build a vertical scrolling shooter game with HTML5 canvas – Part 5

Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading

Posted in HTML/CSS | Tagged , , , | 1 Comment

Build a vertical scrolling shooter game with HTML5 canvas – Part 4

Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading

Posted in HTML/CSS | Tagged , , , | Leave a comment

Build a vertical scrolling shooter game with HTML5 canvas – Part 3

Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading

Posted in HTML/CSS | Tagged , , , | 1 Comment

Build a vertical scrolling shooter game with HTML5 canvas – Part 2

Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading

Posted in HTML/CSS | Tagged , , | Leave a comment

Build a vertical scrolling shooter game with HTML5 canvas – Part 1

Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading

Posted in HTML/CSS | Tagged , , , , | 3 Comments