UPDATED: @font-face and the ‘web font war’…2

What is the @font-face rule?
@font-face is a CSS declaration that allows custom font files to be embedded in a site’s stylesheet. This effectively gives unlimited font options over the standard ‘web safe’ fonts (Arial, Georgia, Times etc). The @font-face rule is actually nothing particularly new, and has been present in Internet Explorer since version 4. [...]

Rethinking The Fold1

So what is The Fold?…
“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. [...]

State saving navigation with CSS6

A common feature of most web navigation systems is the “active” state, e.g. the page you are currently on is highlighted in some way using an additional CSS class.
This effect is easily achieved when using somekind of back end CMS to power your website. For example WordPress automatically assigns a class of “current” to links [...]

3 Annoying problems and how CSS3 will solve them! (Part #2)0

2. Drop Shadow Fun…
Who doesn’t love a bit of drop shadow here and there ey? Traditionally adding drop shadows to block level elements (and keeping them expandable) requires additional <div> tags to house the shadow images, something like this…

This would be created with the following markup:
<div id=”box”>
<!–content goes here–>
</div>
<div id=”box-shadow”><!–no content–></div>
This method is far from [...]

3 Annoying problems and how CSS3 will solve them! (Part #1)1

With Safari 4 Beta supporting many of the proposed CSS3 properties (including animation!), I thought I might discuss 3 design bugbears, and how CSS3 attempts succeeds at solving them…
1. Rounded Corners
Okay, so they feature massively in most modern web layouts, but they are still a nightmare to code. The standard method for producing this effect [...]