Tag Archive for 'CSS'


Some might argue that passive whitespace is the unconsidered space present within a composition. I disagree: if you don’t consider all your whitespace, that’s just bad design. Passive whitespace creates breathing room and balance. It’s important.

Mark Boulton

Design flourishes under constraints

[On the concept of design in general, regardless of what medium it’s in] Design really flourishes under constraints. The more known quantities that we have to deal with, the more creative solutions we can often apply. After all, design is all about creating order out of chaos.

Ethan Marcotte

CSS typography posters

Whilst looking for a practical application for the (new) CSS3 border-image property this evening I stumbled upon this typography wonder:


Nicolas Gallagher CSS Typography Experiment

Now at first glance it’s nothing special, but once you discover this is pure HTML/CSS comboliciousness were dealing with here… well, I got my Firebug on to inspect a little closer and sure enough it’s all image-free. The depression set in once I discovered this was accomplished/published nearly a year ago, back in February of this year (2010).

NB the advanced use of CSS for the heart shape and great use of masking using the :before/:after pseudo-element.

The history of CSS resets


Sound foundation ensures sane development.

Nate Koechley

All you need to know about web typography in two posts

I hand these links over to other designers and developers time, after time, after time:

  1. http://24ways.org/2006/compose-to-a-vertical-rhythm
  2. http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

Essentially they contain all you need to know about web typography. Timeless articles.

Bulletproof @font-face syntax


99 (CSS) problems, but liquid ain’t one

Experiments with liquid CSS layouts

Experiments with liquid CSS layouts

We all know liquid is important, right? (Doctors recommend 1.5-3 litres per day :P)

Some of you may have been fooled into thinking liquid and elastic layouts died as soon as browsers deployed native zoom a few years back. I’ll assume you understand – with a fair degree of knowledge – the technical and usability ramifications of implementing fixed-width, liquid, and elastic web layouts. If not, then the following should briefly clear the haze:

Fixed-width layout

Dimensions have a fixed-width pixel (px) measurement.

Creating triangles with CSS


Random background images with CSS background-size

So you want to display background images on your website?.. Coincidence – me too! Firstly why not pause for a second and refresh this web page for a while and appreciate the lovely photography :P

Mac OSX, Safari 5.0 screenshot

Mac OSX, Safari 5.0 screenshot

If you’ve tried background images (unsuccessfully) in the past, no doubt you’ve come unstuck with a few of the same sorts of dilemmas as I have: the first culprit being content vs. image legibility, and the second being each image’s responsiveness to the viewport (will the image tile or stretch?; in which case you have to start thinking about tessellation accuracy and file size etc.).

Responsive Web Design