Come help a programmer do some design with nothing but CSS :D

Hey SP,

I’ve never posted anything related to design on these forums because I never attempt to do any design. Normally I rely on designers that I work with to do that for me, but I’m working on a personal project (kind of like my own CMS) and I would like to be able to add some style flair to it. The catch is that I don’t want to use any graphics, but if need be I will (custom logo, custom bullets etc). So I’ve been trying to scour the web looking for CSS templates and the like but all of them are quite image heavy and I figured some of you designers out there might know of some good websites that show off just how much CSS can do without images or perhaps have learned some tricks along the way to achieve this. My main goal is to make the majority of the website’s layout and appearance customizable through the CMS itself. While this isn’t difficult for me to program, it’s difficult for me to design, so any tips in the right direction would be great. Ultimately I hope to end up with a website that isn’t hideously ugly which for me is quite a challenge.

Thanks in advance.

Here is a good one I came across the other day http://nicolasgallagher.com/pure-css-gui-icons/demo/

Wow, that’s super relevant to what I’m hoping to find! Thank you.

And another good one http://css-tricks.com/examples/ShapesOfCSS/

Wow this is a good resource I just found http://daneden.me/animate/

More awesomeness! Keep em coming!

May I ask, if you know, what is up with the “after” word that keeps appearing in these CSS examples?

This page will explain it better than I can:

Hrm, I’m very confused. Why would you want to render something after it’s been rendered? I don’t understand the point of it?

The pseudoclasses :before and :after create “generated” content. Stuff that can be rendered without adding more HTML.
It’s incredibly useful. The example in the middle of the page that Ralph suggested shows a simple application of :after. You might wonder why that couldn’t have been done in the HTML, and indeed it could have. (Remember, this is just an example.) The point is that the additional piece is being rendered without having added it to the HTML. You’ll catch the wave after you have seen it in action (small pun intended). :slight_smile:

How is this useful? Can you give me a real world example of where / when this might be useful? I still don’t quite understand. Putting content in a style sheet seems like a bad idea for all kinds of reasons.

Obviously it’s not a great idea to use :before and :after for important content, but it’s incredibly useful for a whole range of styling needs—saving you from needing extra elements in the HTML to do things that are merely presentational. This article has an interesting discussion:

One use he makes of these is to add tick marks to visited links.