SpyreStudios - Design and Development Magazine

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.

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.

With the amount of content available online these days, we sometimes have to resort to using different techniques in order to show/hide/group some content or information on a web page. Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll […]

There are many different coding styles, some do not like indentation, some like to capitalize certain things, others like to add more than one element on a line, the main train of thought is they are all after one common thing: organization and better code. Without influencing my coding style, we’ll discuss ten tips for […]

A lot of developers like to use a framework when they code. While frameworks can save you valuable coding time, I believe using pre-made frameworks to sometimes be limiting and unproductive. Of course, I’m talking about pre-made HTML and CSS frameworks like Yahoo’s YUI or the 960gs framework, not WordPress, Drupal or some full-featured CMS. […]

Grids are an invisible foundation that structure the websites we develop and design. This invisible foundation makes it possible for rapid development, concise code, and a much more organized layout. Of course you’re not obligated to use a grid, and grid-less websites are fine if the random structure is intended, however, if avoidance of a […]