SpyreStudios

Web Design and Development Magazine

Draw A Stickman Episode 2

by

Looking for some creative inspiration? Hitcents.com just launched their sequel to the exciting Draw a Stickman adventure.

For those who haven’t seen the first stickman episode, you’re asked to draw a stickman. He then comes to life and sets out on an exciting adventuring involving a dragon and a shark attack.

This newest episode includes some creative twists with a tiger chase and a flying elevator. When you finish the adventure you can even send your stickman to friends! Here are some screen shots of the fun adventures.

Design a Full HTML5/CSS3 Template Replica of Digg v3

by

Social media junkies on the turn of the year 2004 surely remember Digg. It was the powerhouse of social news, all the techies would flock to Digg on a daily basis. And it’s been through quite a few changes recently with the v4 redesign. However I fondly remember Digg’s classic appeal running under v3 as the most accepted web interface.

Thus I’ve taken the liberty to re-code the entire front page template into HTML5/CSS3! And in this short tutorial I’ll be introducing you to some of my techniques. Additionally I’ve offered the source code completely free to download for your own usage. Much of the design I’ve had to piece together through the Wayback Machine Internet archives.

Digg v3 Template hand-coded into HTML5/CSS3

Modernizing Scripts Every Web Designer and Developer Should Use

by 24 Comments

Web development keeps getting better – there are more increasingly-standardized tools like HTML5 and CSS3, and their features let web designers and developers create advanced and good-looking websites more easily.

But some browsers – mainly Internet Explorer version 6, 7, and 8 – don’t support many of these features, like border-radius, gradients, text-shadow, transparency, CSS animations and transitions, and so forth…

How To Create a Sweet CSS3 Vertical Navigation

by 13 Comments

Today we’ll be creating a beautiful vertical CSS3 navigation, without the use of images. Basically we’ll display a circle with an icon in the center. When the user hovers over the circle, it expands and shows a short description.

Now you may be wondering: how are we going to display an icon without images? Well, Drew Wilson’s (fabulous) Pictos font makes this quite simple. Unfortunately (but understandably) it’s not free, you can purchase is for $49 here. Luckily, there are other icon fonts out there like iconic, which you can use for free.

I should also mention that this has been tested using Webkit browsers only (Safari, Chrome). It may work in other browsers but probably with limited support. Check out the demo here!

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

by 21 Comments

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

by 14 Comments

Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.

The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.

HTML5 Canvas Image Effects: Black & White

by 20 Comments

The new canvas tag in HTML5 is known for its illustration power. It’s basically an empty element on which you can write and sketch using Javascript. But there’s a hidden power: image manipulation. In our opinion, this is the most important element that differs from SVG. With canvas you can perform operations on pixel based […]