CSS3 – The Nu-Skool for Web Designers

CSS stands for Cascading Style Sheets. Basically it’s a way of describing how things must look and where they are. Currently, CSS2 is standard since most browsers support it. The standard itself has been held back by Internet Explorer and, well, Internet Explorer. But not to beat a dead horse, CSS3 is the new rising star that all web designers and web developers are lining up to see.

Before we had some simple rules. like:

border: 1px solid #000;

Which means that an element we choose will have a black 1 pixel solid border around it. We can use some different line types like “dotted” or “dashed”. There is also some layout rules:

margin-right: 10px;

Pretty simple huh?

Well now there are some new rules, and new possibilities for web designers. Crystal Asia has gotten into the habit of using some of these in the designs as most modern web browsers support them. We create a set of CSS files specifically for the browsers that support it which reduces load times of the web page and look better.

A common one is:

border-radius: 5px;

It allows you to create corners that are curved. This doesn’t work in IE, so we generally leave the corners square or chop out little corners and position them with javascript (see how much extra work this is?) until it supports border-radius. So this is just a simple example. There are many more but perhaps looking at them would be more entertaining :) You might need to download a supported browser – probably Google Chrome would be the best bet.

Sliding cubes in CSS3My favourite is sliding cubes by Paul Hayes but it only support Safari 4+ and Google Chrome.

I like it because you can actually select the text. It’s not just 4 squares as an image that move.

It uses to new properties ‘transform‘ and ‘transition‘.

We dream of the day when we can code websites which can do all these fancy things. It will transform the jobs we do. It will transform the tools we use. It’s an exciting time for web designers world over. All I hope is that Internet Explorer grows up a little and starts working with us instead of against us.

Leave a Reply