Redesign: no images – CSS only

Last Update:
Created On: December 27, 2009

Since my computer has been broken for quite some time, and since the low-tech computer I have been using meanwhile can’t really handle Photoshop, I decided to redesign this website without any images.

Compared to other people I already use an extreme minimum of images in my designs, but now I was pushing for the absolute zero number. I was a bit curious to how far you could push design using only CSS without images, and how the different browsers supported it. While there is still a lot of things you can only do with images the things you can do with CSS3 are nothing short of amazing. Gradients, shadows, transparency, etc. And for every thing you do in CSS instead of images you save a bit of loading time.

Thanks to the browser wars that are currently waging every browser is doing their best (except IE) to support the latest techniques, and a lot of the major browsers support a wide range of CSS3 and HTML5 features. But not every one does, and there is always a lot of people who don’t use the latest versions, so the page should still look OK without all the styling. OK is my only requirement, because I’m coding for the future, not the past.

Now I could have gone crazy and thrown around elements everywhere, but I wanted it classy and simple. Very subtle shadows and gradients that you can barely see without squinting, but combined they lift the page from the screen.

The features:

  • Nearly every text (except the main content) have some form of text-shadow. By using a lighter color than the background it gives the impression that the text is lowered into the page.
  • The main content area has a small background gradient at top and bottom, giving the impression of a shadow and that it’s raised from the page.
  • The theme thumbnails has a box-shadow and round corners, outlining them and raising them from the page. The thumbnail itself has a?separate?layer over it with a half-transparent gradient, darkening it at bottom. It’s almost?unnoticeable?until you hover over the image and the normal state is shown.
  • The “button” in the theme thumbnails is a combination of background gradient, box shadow, round corners, and text shadow.

So what does it look like in the different browsers?

Google Chrome 4.0

  • Box shadow
  • Background gradient
  • Text shadow
  • Round corners

Mozilla Firefox 3.6 (Beta 5)

  • Box shadow
  • Background gradient
  • Text shadow
  • Round corners

Safari 4.0.4

  • Box shadow
  • Background gradient
  • Text shadow
  • Round corners

Opera 10.10

  • Box shadow
  • Background gradient
  • Text shadow
  • Round corners

Internet Explorer 8

  • Box shadow
  • Background gradient
  • Text shadow
  • Round corners

Now Internet Explorer 8 does has some support for CSS3, but their own custom hack for enabling it looks something like this:

filter:progid:DXImageTransform.Microsoft.Gradient()

… with a guide that made even less sense, so I didn’t bother.