CSS3

Test your maths skills at the MathDOJO!

Anoth­er pro­duc­tive week­end bares fruit for anoth­er mini game! This time I’ve put togeth­er a dojo-themed mini game whose sole pur­pose is to test your abil­i­ty to do sim­ple (well, most­ly) arith­metic cal­cu­la­tions in your head and your tol­er­ance for my sense of humour (which is not so bad I hope ;-) ). Screen­shots Here’s …

Test your maths skills at the Math­DO­JO!Read More »

Creating a count down meter with CSS3 and JQuery

Whilst work­ing on the Math­DO­JO mini game one of the neat lit­tle things I tried to do was imple­ment a time meter which steadi­ly counts down and changes colour (from green to yel­low to glow­ing red) as it approach­es 0: First, you need some­thing to rep­re­sent the meter, a sim­ple <span> ele­ment will do: 1: …

Cre­at­ing a count down meter with CSS3 and JQueryRead More »

Creating a sticky note app with HTML5, CSS3 and Javascript

I saw this tuto­r­i­al the oth­er day, it’s cool but I fan­cied tak­ing it a step fur­ther and make it use­ful as an app rather than just a fan­cy way to show some struc­tured data on the screen. Here’s a list of the fea­tures which I want­ed to add: being able to edit the title …

Cre­at­ing a sticky note app with HTML5, CSS3 and JavascriptRead More »

Having fun with CSS3 — Box Shadow property

CSS3 intro­duces a use­ful lit­tle prop­er­ty called box-shad­ow, which as the name sug­gests adds a shad­ow to an ele­ment. Sim­ple box shad­ow You can cre­ate a basic box shad­ow like this: This casts a shad­ow with an X-off­set of 10 pix­els and a Y-off­set of 20 pix­els: You can equal­ly use neg­a­tive val­ues for the …

Hav­ing fun with CSS3 — Box Shad­ow prop­er­tyRead More »

Having fun with CSS3 — Border Radius

As you may know already, CSS3 has intro­duced a new set of prop­er­ties which allows you to eas­i­ly add curved cor­ners to a box. Sim­ple round cor­ners You can cre­ate a div with round cor­ners with this sim­ple css: How­ev­er, giv­en the stage of devel­op­ment CSS3 is at as of now this is only sup­port­ed …

Hav­ing fun with CSS3 — Bor­der RadiusRead 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