SpyreStudios

Web-Design and Development Magazine

How To Create a Sweet CSS3 Vertical Navigation

by 14 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!

Cloud Computing: The Theory Behind The Hype

by 6 Comments

“Cloud Computing”, it almost rolls off the tongue doesn’t it? If you believe the hype, cloud computing is cheaper, safer and easier than any other form of application hosting, it exists in the magical land of ‘cloud‘ where nothing ever goes wrong, in fact, to say it’s reliable is almost an understatement.

However the truth, can often be far different from that which many of the ‘cloud computing‘ or ‘cloud hosting‘ providers would have us believe. The cloud is a complex, multifaceted beast, with varying levels of complexity and specialty, not to mention radically varying prices. All told we would do well to consider just what makes up this ‘cloud‘, when it really is a great solution, and just where we may just be falling for the hype.

7 Steps To A More Effective And Productive Webdesign Process

by 13 Comments

Designing for the web is fun and we as web-designers are constantly learning new techniques and improving our skills. But to be honest, kicking-ass at Photoshop doesn’t mean your new website will be a success. It sure will be pretty, but there are many things you should do before you actually sit at the computer and start designing.

The tips and tricks in this post are my personal experience. It has worked for me and I’ve learned many of them from working with other designers, too. They’re like little insights into my own design process. I hope you find this post useful.

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.

Version-Less Development: What is it and Why it’s Important

by 9 Comments

Software and application development is a complex process. A single project may involve tens or even hundreds of people spread across dozens of teams and even multiple continents.

Like any major discipline accounting for millions of jobs, software development has many different methodologies and techniques, ranging from Agile development to Waterfall and Prototyping.

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.

Layers Of Abstraction — What Are They And Why Do They Matter?

by 3 Comments

Sometimes we can understand concepts without ever ‘knowing‘ the concept. As an example; few people would claim to ‘know‘ how learning occurs, however we are all capable of learning. Clearly the understanding of, and ability to do so, are quite separate skill sets.

Layers of abstraction is one such concept — we make use of layers of abstraction every day and yet it allows us to better understand the world in which we work.