Select Page
How to Loop CSS Animation – Falling Snow Tutorial

How to Loop CSS Animation – Falling Snow Tutorial

See the Pen Animated CSS Christmas Snowglobe by chilli con code (@chilliconcode) on CodePen. Another of my pens on codepen.io was picked to feature on the front page recently, so I thought I’d take the most complicated part of it out and walk you through the...
Android Nougat loading rings [CSS tutorial]

Android Nougat loading rings [CSS tutorial]

As my code of the Android Nougat loading rings got quite a bit of interest on codepen.io last week, I thought I’d do a quick CSS animation tutorial to show how I pieced it together.  The code is actually quite simple- it just consists of 4 different coloured...
Multi-page content slider in a single HTML file

Multi-page content slider in a single HTML file

I recently had to create a custom HTML and PHP form which was split up into separate steps. As the form would change dynamically depending on what the user in-putted in previous questions, I wanted to display it in a page format so the user couldn’t see what was...
Hypnoctic CSS Spinning Illusion

Hypnoctic CSS Spinning Illusion

I came across a gif online of this really mesmerising illusion so I thought I’d have a go at coding it myself with CSS and I discovered some interesting results along the way… My first port of call was to get the concentric circles set up with the ability...
CSS Image Hover Overlay

CSS Image Hover Overlay

With a just a bit of CSS, you can add visual interest to your thumbnail links or even just use it as a more hidden way to add a caption to an image. There are endless effects you could use with CSS, so don’t be afraid to have a play around with the code and see...