CSS-in-60, where you can watch the progress and evolution of a CSS design project. This project has me converting an existing table-based E-Learning system/website into a CSS-driven masterpeice that is future-ready, portable and seperates style from content. The animated GIF that follows, monitors the progress of converting just the homepage. The animation is not real-time, but rather compresses many days and hours into a short, sweet, 60 second clip.

Read more (311 words, 2 images, estimated 1:15 m reading time)

Magazines are a continual source of inspiration for website design, yet many of the techniques used in magazine layouts are nary to be found on the web.

http://www.mandarindesign.com has a nice compilation of css tricks, magazine style pullquotes and even CSS based opacity/transparency.

Click here to visit this article's permanent page.

Another installment of CSS in 60. Where you can see a website based on xhtml and css being built from scratch in about 60 seconds or less. A screenshot was taken anytime css changes were made that significantly alters the layout. A days worth of work compressed for your viewing pleasure. This is just another example of how CSS can be used to achieve a pixel-perfect rendition of what was mocked up in a graphics program. Click read more to view the animated GIF (412Kb).

Read more (83 words, 2 images, estimated 20 s reading time)

Fonts have always been a major concern in webdesign, or rather, the lack of fonts. To remedy this, I have recently installed sIFR: Scalable Inman Flash Replacement for all headlines. sIFR replaces all H1’s, H2’s etc with a flash rendition of the text. Naturally you can select any font you have on your computer - giving designers complete typographic control over their headlines. Not to be used as a text replacement for websites, so designers still don’t have 100% control over type - but its very nice and degrades well for non-Flash or Javascript enabled browsers.

Read more (450 words, 1 image, estimated 1:48 m reading time)

A Flash based Flickr image browser. What a great implementation of the wonderful Flickr API and Flash’s ability to access dynamic content quickly and present it in a way only Flash can.

Are you a designer? Find yourself forgetting certain css selectors? I love Jack Daniels has a great cheat sheet section and has recently added a CSS cheat sheet.

Click here to visit this article's permanent page.