Skip to main content
CSS is fun and cool and I like it.

Better Ordered Lists (Using Simple PHP and CSS)

Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself. Here is an example where you ditch the traditional ordered list and create your own!

If you set up a loop, or are already within an existing loop (think WordPress comments), the possibility for cool numbered lists presents itself. Just set up an integer variable in … Read article “Better Ordered Lists (Using Simple PHP and CSS)”


Links of Interest

I did another guest post over at CSSJuice on a technique using the same background image for different objects on a page.

Along the lines of the perfect fluid width layout that I did a while ago, Dwight House has a very nice “perfect layout” of his own that is very nice.

This is one of the most spot-on articles I’ve read on the dealing with difficult (read “dumb”) requests that clients can have, and how to handle … Read article “Links of Interest”


Alternative Style Links

You may know the classic link style very well. Blue with an underline. There is an alternative way to achieve the same effect, that is a bit nicer.

Here is the code:

a {
  text-decoration: none;
  background: url(link-line.gif) repeat-x 0 100%;
  padding-bottom: 1px;

Giving the background position of x at 0 and y at 100% places the background image at the bottom of the text and by setting the padding-bottom to 1px, we make the distance between the text … Read article “Alternative Style Links”


Simple Tabbed Menu Using Sliding Doors (Downloadable)

I’ve touched on the “sliding doors” theory here a little bit before, but never with a full-blown example. If this is the first you are hearing of it, sliding doors is a technique which allows you to expand graphics “from the middle” as you expand the content of a web element. Expanding graphics isn’t the hard part, you can always just make a bigger background image than you need and expose more of it as the content grows. The … Read article “Simple Tabbed Menu Using Sliding Doors (Downloadable)”


CSS Frameworks Roundup (and some thoughts)

The guiding theory behind CSS frameworks is saving time. If you write a lot of CSS, you know you write a lot of the exact same code over and over and over. There is something to be said of learning through repetition, but seriously, how many times do you need to type margin: 0 before it’s just annoying?

CSS frameworks are usually just a collection of CSS files that set up things like basic typography, form styling, grids/simple layout, and Read article “CSS Frameworks Roundup (and some thoughts)”


Matrix of Rollovers

Here is a bona fide little CSS-Trick for ya’ll.

I knew I could make a “matrix” of squares with rollovers. Then I got to wondering if I could duplicate that matrix of rollovers elsewhere on the screen. I figured I could using the same technique as Remote Linking. Then I got to thinking I could make the rollover in the duplicate matrix different by using a different style of rollover.

The technique is pretty simple. The HTML for a … Read article “Matrix of Rollovers”


Links of Interest

Nice article from 456 Berea Street on maintaining the quality of your markup once you pass a design along to a client. It advocates the use of Big Red Angry Text, which is a CSS trick for highlighting any deprecated elements on the page.

I like this presentation of bar graphs using pure CSS. From CSS superhero Eric Meyer.

Jehiah has a good article on how to deal with the ridiculous default length of buttons in Internet Explorer.

CSSJuice … Read article “Links of Interest”


A Nice & Simple Contact Form (Downloadable)

There are a million contact form examples out there, why this one?

  • It’s SIMPLE
  • It’s FREE
  • It WORKS
  • It’s VALID
  • and it’s styled with CSS

Take a look. Download it. Take it apart. Use it for whatever you’d like.

Check out the nice clean emails it generates:

View Demo   Download Files

PLEASE NOTE: I get a lot of support requests about this example. It still works perfectly fine, but of course that’s pending on a whole bunch of things … Read article “A Nice & Simple Contact Form (Downloadable)”


Multiple Remote Linking: An Example and How-To

What is remote linking?

Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.

In this example, you will see a row of colored circles across and a list of their names below. Rolling over the circle will highlight both the circle and the name. Likewise, rolling over the name will highlight both the … Read article “Multiple Remote Linking: An Example and How-To”