Galleries of awesome pure CSS web designs using no/few images?

February 4, 2008 5:07 PM

I'm looking for a showcase/inspiration gallery of imageless (or at least minimal graphics) pure CSS web designs. I figured this would totally have been done as a "Top X" list somewhere, but it doesn't seem to exist. Not necessarily "minimalist" design, but what can be done with great colour, layout, typography, and clever CSS.

I've googled and scoured del.icio.us for CSS gallery sites that have a category like this with no luck. I'm looking for it in order to get some inspiration for image-free design elements (menus, tabs, buttons, etc).

posted by stephthegeek to Computers & Internet (9 answers total)

Your goto site: http://www.csszengarden.com/
posted by boo_radley at 5:12 PM on February 4, 2008

Response by poster: Erm.. just about every design I've ever seen on Zen Garden uses images pretty extensively.
posted by stephthegeek at 5:19 PM on February 4, 2008

Check the sidebar and archives on Smashing Magazine, they regularly showcase different CSS design styles, and you should be able to see quite a few that focus on layout over imagery.
posted by Jairus at 5:36 PM on February 4, 2008

Best answer: Open Source Web Design is a site where people upload their designs for other people to look at or use. You can search for designs that only use CSS without images (among other criteria). You can also download the designs as .zips that include the css and html.
posted by amethysts at 5:51 PM on February 4, 2008 [1 favorite]

Best answer: There was one, Textbased.com, but it's dead.

I found some relevant posts, although some of them have sites with a lot of images.

Beautiful Sites With No (Or Very Few) Images
Web Design is 95% Typography
25 Beautiful Minimalistic Website Designs (and Part 2)
Minimalist Website Design Patterns
Minimalism at Design Meltdown
New Minimalism in Web Interface Design
10 minimalistic blogs worth checking out
posted by clearlydemon at 6:28 PM on February 4, 2008 [4 favorites]

2^nding OSWD, but note that there are some designs with very good CSS and some designs with absolutely horrendous CSS (or no actual CSS even though they're labeled as such) on there... Some appear to have been designed via drag-and-drop in Front Page or something so be discriminating.

I have found the Microsoft ASP.NET CSS design samples to be pretty high-quality code and most of them are fairly minimalist and make varied and clever use of those design elements. There's no reason why they would have to be used with ASP.NET and they're cross-browser. I think the ones I've downloaded have all included style rules for form elements, though I don't recall clearly.
posted by XMLicious at 10:01 PM on February 4, 2008

Response by poster: Smashing -- great stuff, lots of inspiration there, but not too many that are graphics free.. but I love that site :)

Oooh, I didn't know OSWD let you search by no images. That's awesomely helpful, thank you! Quality is mixed but I'm more looking for a wide range of inspiration, so that is great.

And awesome links, clearlydemon.
posted by stephthegeek at 10:54 PM on February 4, 2008

Here are some more, this time they are Wordpress themes. A big theme index might be a good place to find inspiration.

Plaintxt Themes
Best minimalist Wordpress Themes
18 minimalist WP Themes
posted by clearlydemon at 11:11 PM on February 4, 2008

If not too many that are graphics free was about the Microsoft site, most of them do have a single large photograph at the top, but I usually yank that out and replace it with a similar-sized spacer div and it looks fine. There are often other things like rounded corners but you can make those square or convert to one of the js rounded corners easily.
posted by XMLicious at 2:18 AM on February 5, 2008