Image free zone...

By Marcos J. Drake.

So what's this all about then?

A couple of months ago someone asked on a forum if it was possible to have a pure CSS site that looked good with no images whatsoever. At the time I was way too busy working on a contract to even think about it but this morning I woke up wanting to give it a try - and this is what I came up with.

I don't offer this as an example of brilliant design, (for that take a look at my portfolio ;-) - this is just a brief example of what is possible with CSS without using any images.

Is it practical?

Not really! It only works in Firefox, (Otherwise I've only tested it in IE6 and it doesn't work in that). It will also probably break if you don't have the Trebuchet MS font as that is what I've used throughout the page.

Other than that it's probably okay accessibility wise as the circle 'images' are created using full-stops so the only problem a screen-reader would have would be four superfluous dots before the content.

Any attempts at changing the text size, up or down, breaks everything so not good for those with any kind of visual impairment other than complete blindness :-/

So how does it work?

Pretty simple stuff really... As mentioned previously the circles are full-stops at various font sizes, with a bit of relative positioning and z-indexes to line them up. [view the source to see the CSS and XHTML - I've left the CSS in the page to make it easier.

The navigation is also simple, just a regular <ul> displayed inline with spans affected by a:hover and borders left/right.

Last up is the shadow on the 'Imageless CSS' - now usually I'm not into putting shadows behind text - haven't been for many years now - but I thought I'd throw it in here just to show that it can be done. There are two instances of the header text with the darker, shadow, version positioned behind the main white text using a lower z-index and some offset positioning.

About the Author...

I've been designing Web sites professionally since 1997 but was guilty of 'HTML Terrorism' up until 2004 when I joined another design forum and started hearing about the wonders of CSS positioning. Until then everything I'd done had used tables galore and some of my older stuff was even guilty of frame abuse *shocked*.

My first attempt at CSS positioning with validated XHTML came with the latest incarnation of my portfolio, which personally I think is a lovely design but in which the code, although W3C validated, is a bit on the fugly side!

Next up came a personal project listing thousands of proverbs - Here the CSS/XHTML was a lot cleaner and the whole seperation of content/positioning was actually done right this time.

My biggest standards compliant project to date is a search engine / directory listing hotels, b&bs and self-catering accommodations throughout England which really let me get my teeth into CSS/XHTML in a big way.

© 2005 Marcos J. Drake. All rights reserved.

More imageless ideas...

Whilst playing with this page I got to thinking about what else could be done with imageless CSS - if I have any good ideas I'll add them to this page ;) In the meantime how about...

Smiley Face






This simple smiley face is based around the same idea as the circles in the header. View the source to see the positioning used.