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 »
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. …
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 …
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 »
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 »
CSS3 introduces a useful little property called box-shadow, which as the name suggests adds a shadow to an element. Simple box shadow You can create a basic box shadow like this: This casts a shadow with an X-offset of 10 pixels and a Y-offset of 20 pixels: You can equally use negative values for the …
As you may know already, CSS3 has introduced a new set of properties which allows you to easily add curved corners to a box. Simple round corners You can create a div with round corners with this simple css: However, given the stage of development CSS3 is at as of now this is only supported …
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.