The future of Web Design: CSS3

Posted on | August 3, 2010 | No Comments

CSS (Cascading Style Sheets) provide the rules which make all modern websites look good. These rules govern the size and colour of text, borders and background on areas of the site, even whether an element is held within the text or if it ‘floats’ outside of it.

With most modern browsers finally supporting the majority of CSS2 (the current version of CSS) it is time to look forward to some of the great new features CSS3 promises. Here are Deepblue’s top 3 CSS3 features:

Rounded Corners: border-radius

Designers have been using rounded corners in web design for years – however, this has always involved using images or various javascript ‘hacks’ to make them work. In CSS3, however, designers have the ability to make a box rounded simply by adding the border-radius rule.

Some modern browser already support this style (or variants of it) – you may have seen some rounded boxes on the Deepblue site depending on your browser (as per usual, Internet Explorer is still miles behind the pack).

Multiple Text Columns: column-number

This rule will allow web designers to lay out their text in multiple adjacent columns, similar to how magazines and newspapers display articles.

Designs like this have been used in the past, but they always have to feature carefully written text and manual breaks – the advantage of the CSS3 rule is that the text will automatically be formatted for you, and take into account text sizes etc.

Web Fonts

Currently designers are restricted to a small selection of fonts when designing the ‘real text’ portion of websites, due to inherent limitations in web browsers (they can only use fonts which have been installed on the user’s computer). There have been a number of ways around this, including using Flash movies with other fonts embedded, using Images for headings, and even Javascripts which can pull in required fonts, but these solutions are far from ideal.

With the web font specification, however, designers will be able to upload web fonts alongside their website, and the CSS will instruct the user’s computer to download and use these fonts on the website – allowing you to add visual pizazz without cluttering up your web page with excess Javascript or Images.

Category: web design best practices
Tags: > > > >

Comments

Leave a Reply