Tweet 5 Web Design Techniques for the Future

With the recent releases of Firefox 3.5 and Safari 4, a host of new CSS techniques are becoming prevalent. Here’s a run-through of some of the most exciting and useful.

Rounded borders

This could signify a move away from the traditional hard-edged, boxy layouts we’ve become accustomed to on the Internet into a softer, more stylised form. The effect is achieved simply by defining a border radius and background colour or border.

background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

Supported in Firefox, Safari and Chrome.

Resources

CSS3.info

Web fonts

Arguably the most important recent advancement in web design is the ability to expand the range of available usable fonts. This will give another dimension to a website design and inevitably blur the line between the web and print. This technique should, however, be executed with a degree of caution as typography is an art form in itself and fonts should be chosen carefully.

To use web fonts, the font itself must be uploaded to a server. Each form of the font family must be declared using the @font-face rule and then called using “font-family”.

@font-face {
font-family: Fontin;
src: url('Fontin-Regular.otf');
}

@font-face {
font-family: Fontin;
font-weight: bold;
src: url('Fontin-Bold.otf');
}

Supported in Firefox 3.5, Safari, Opera 10

Resources

Fonts available for @font-face embedding
Exljbris Font Foundry

Multiple Backgrounds

There is limitless potential to this technique but its main advantages are minimising mark-up and page-weight whilst expanding design freedom. Example applications would be to replace the sliding doors technique on expandable boxes and tabs or to create parallax backgrounds. This is done by simply listing the various background images and positions that are being applied.

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Supported in Safari, Chrome, (Firefox – soon)

RGBA and Opacity Transparency

Transparency effects could originally only be achieved using PNGs but now can be done directly in CSS. Hugely useful for improving aesthetics and user interfaces. The opacity value can be defined along with the RGB/Hex value as follows:

background-color: rgba(0,0,255,0.5);
background-color: #CCCCCC; opacity: 1;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes)

Text/Box shadow

Allowing you to ditch the jpegs/PNGs that use up precious resources – text and box shadows/glow effects can now be executed just using CSS. A handy technique which can be used, for example, to give focus to certain elements, bring out the text in a main heading or create an Apple-style embossed effect. The shadow offset, blurriness and colour are defined like so:

text-shadow: 2px 2px 2px #000;
box-shadow: 10px 10px 5px #888;

Supported in Firefox 3.5, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

While it will be some time before these new techniques become commonplace, there are still a large number of web users that will be able to notice them and ever-increasingly in the future. For now though, it is important to ensure your website degrades gracefully in lesser-browsers such as Internet Explorer that don’t yet support them.