CSS3

How to add a subtle gradient on top of an image using CSS

As I rebuild the landing page for the AppSync Masterclass I wanted to give this boring “about me” section a facelift. After taking inspiration from other landing pages, I decided to go with something like this. Notice the gradient effect towards the bottom of each image? It provides a nice backdrop and contrast for the …

How to add a subtle gradient on top of an image using CSS Read More »

How to add a zoom in effect with CSS

As I rebuild the landing page for the AppSync Masterclass, I wanted to add a zoom-in effect to some of the images, like this: After some googling and a bit of experimentation, this is what I ended up with. <figure class=”img-hover-zoom”> <figcaption>…</figcaption> <img src=”…”> </figure> When it’s hovered over, the <img> tag would scale up. …

How to add a zoom in effect with CSS Read More »

Test your maths skills at the MathDOJO!

Another productive weekend bares fruit for another mini game! This time I’ve put together a dojo-themed mini game whose sole purpose is to test your ability to do simple (well, mostly) arithmetic calculations in your head and your tolerance for my sense of humour (which is not so bad I hope ;-) ). Screenshots Here’s …

Test your maths skills at the MathDOJO! Read More »

Creating a count down meter with CSS3 and JQuery

Whilst working on the MathDOJO mini game one of the neat little things I tried to do was implement a time meter which steadily counts down and changes colour (from green to yellow to glowing red) as it approaches 0: First, you need something to represent the meter, a simple <span> element will do: 1: …

Creating a count down meter with CSS3 and JQuery Read More »

Creating a sticky note app with HTML5, CSS3 and Javascript

I saw this tutorial the other day, it’s cool but I fancied taking it a step further and make it useful as an app rather than just a fancy way to show some structured data on the screen. Here’s a list of the features which I wanted to add: being able to edit the title …

Creating a sticky note app with HTML5, CSS3 and Javascript Read More »

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close