Category: Articles


Introduction to CSS3 – Part 1: What Is It?
Articles / 6 May 2008

Introduction to CSS3 – Part 1: What Is It?

This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. We will be starting from the very beginning – taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.


The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

  • The Box Model
  • Lists Module
  • Hyperlink Presentation
  • Speech Module
  • Backgrounds and Borders
  • Text Effects
  • Multi-Column Layout

View the full list of modules


Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.

It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.

New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.

How will CSS3 affect me?

Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.

The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).

Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.

Other posts in the series

Win a CSSEdit License in 30 Seconds
Competitions / 5 May 2008

Win a CSSEdit License in 30 Seconds

Win a copy of CSSEditUpdate: The survey is now over, thank you to all those who participated – we will be contacting the winner shortly

We have four questions to ask you – it will take somewhere between 30 seconds and a minute to answer them and you stand a chance of winning a copy of CSSEdit.

CSSEdit is a highly acclaimed piece of software, allowing you to design beautiful websites with greater ease. Our introduction to CSSEdit highlighted some of the application’s features, along with how to get started using it.

You can click the link below to fill out the survey – be sure to include your email address and we will be in touch if you are a winner!

Changing for the Better
Articles / 5 May 2008

Changing for the Better

First of all, a huge thank you to the hundreds of people who responded to our survey – we’ve had some great suggestions of improvements to the site. The survey will be running for the next few days before we announce the winner of the contest so if you haven’t filled it in yet, please do!

After hearing what you had to say, a few minor design and functionality changes to the site have been made. From the annoying fact you had to click twice to get to a featured site, to the scroll bar in the middle of our homepage – we’ve listened. Here are some of the changes that have been made today:

1. We have placed more visual emphasis on news and tutorials
2. Designs are now updated twice daily
3. We are increasing our regular CSS gallery updates to 4 per day
4. We are aiming to post more regular news and tutorials – so you can get your inspiration and news all in one place
5. You can now search by colour or layout from the top of the homepage
6. We are accepting reader submitted news articles
7. Only one click is required to get to a featured website
8. … and quite a few more random improvements!

We hope that some of your niggles have been fixed and you’ll enjoy Design Shack even more!

10 Website Statistic Tools
Articles / 25 Apr 2008

10 Website Statistic Tools

Keeping track of visitors to your website is vital, and these ten tools can allow you to monitor and review traffic in different ways. Some are free, some require a small charge – all of them will help you optimize your website and know exactly who is passing eyes over your design.

1. Google Analytics

Google Analytics

Analytics is a great word, meaning “sophisticated data analysis and modeling, including developing customer profiles, determining customer and merchandise price profitability”. Google Analytics is certainly a great statistical tool, and is completely free. It integrates into your website using a small piece of code and is hosted by Google so it doesn’t require you to install anything. The downside is the inability to install plug-ins to track extra aspects of your site.

2. Mint


Mint is a tool created by a designed called Shaun Inman (who has a great personal site design to boot). It is a locally run piece of software, which means installing it on your web server. The advantages are that it is very customizable and looks great. ‘Pepper’ can be used to add plug-ins and extra features not included by default, created using the Mint API. Mint costs $30, which is a small price to pay for an in-depth knowledge of your visitors.

3. AWStats


AWStats is a different style of tool as, rather than tracking hits in real-time through a piece of code on your site, it reads web server log files to generate statistical reports. There is a good chance that your web server already has AWStats installed and it may just need turning on. A degree of technical knowledge is required to install and configure AWStats yourself, but it can be a useful tool for another perspective on your traffic.

4. StatCounter


StatCounter comes highly recommended by many people as a free, hosted tracking service. They offer a huge variety of different statistics, from entry and exit pages to country/state/city information. It is completely free, so may be worth giving a try to see if it fits well with your tracking needs.

5. Urchin

6. Webalizer

7. The Counter

8. Going Up

9. Omniture

10. Webtrends

We would recommend only using one or (at the most) two of these tools at a time. Most of them slow the loading of your page to an extent, and adding several at a time could impact the experience of a visitor.

Express Submission
Articles / 24 Apr 2008

Express Submission

We have been testing a new way to submit your site to Design Shack recently, and it has been very well received. Express submission guarantees a 24 hour review of your website, and we will provide a personal response via email. The price was $10, and is now only $7. If you’re looking for a way to have your website reviewed quickly then this is it!

Please feel free to let us know your thoughts on the new service, we always appreciate feedback.

Ruby on Rails Intro
Articles / 22 Apr 2008

Ruby on Rails Intro

You’ve probably heard about Ruby on Rails by now, but it might not be something you have ever really got to grips with. A List Apart have published two great articles as an introduction to Ruby On Rails:

Getting Started with Ruby on Rails

Creating More Using Less Effort with Ruby on Rails

They look like an easy way to get started, aiming to to demystify Ruby on Rails and convince you that you can make the leap.

Coding With Springloops
Articles / 18 Apr 2008

Coding With Springloops

A common problem I encounter when designing a site in a team is the lack of a tool to easily allow us to collaborate and co-ordinate our work. There are several tools available to manage workflow and tasks, but few to actually help with the problem of overwriting someone else’s code.

Springloops is a unique source code management tool focused on web development teams. It allows you to code in parallel and share your code safely concentrated on results, not on lost changes or overwritten files. You get rapid collaboration in protected space.

In addition, using innovative deployment features, you can get rid of uploading files via ftp and overwriting others files on the server. It only takes one click to update several servers (both staging and production) in seconds. It can be a real problem solver – take a look at see if it’s for you.

NuBlue Hosting Discount
Competitions / 9 Apr 2008

NuBlue Hosting Discount

In celebration of a new hosting package, designed specifically to support the Magento eCommerce application, NuBlue are offering a 25% discount for all Design Shack readers. Simply use the discount code ‘sh4ck’ when signing up for an account. NuBlue are one of very few UK hosts that are currently supporting this application and this discount is a great way to get started using Magneto.

Spring Giveaway
Competitions / 26 Mar 2008

Spring Giveaway

To celebrate the arrival of Spring, Slice ‘n Dice are giving away a free project and a Gooey Carbon Bundle from It looks like a great contest, something to make your spring coding a little easier!

The project up for grabs is a one page XHTML design with a three day turn-around – a value of $249. All designs are cross browser tested, with fully commented code.

Top 10 CSS Navigation Menus
Articles / 26 Mar 2008

Top 10 CSS Navigation Menus

Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood.

Developer Tools in Safari
Articles / 19 Mar 2008

Developer Tools in Safari

Open the safari preferences window, click on the ‘advanced’ option and then select the box entitled ‘Show develop menu in menu bar’. Straight forward! The result is a new field in the top menu which looks like the following:

10 CSS Form Examples
Articles / 12 Mar 2008

10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

0 0 0 0