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

State of the Blog: Statistics and Updates

Bye Bye BlogRush.
I really wanted to give BlogRush a healthy try, so it’s been in the sidebar here for over a month, if not two. They have just released Phase 2, and it was just what I have been waiting for: real statistics. I have racked up tens of thousands of credits over the last 7 days and each post of mine has been syndicated throughout the BlogRush network thousands of times. Guess how many readers for each post? … Read article “State of the Blog: Statistics and Updates”


Accessibility Basics: Testing Your Page For Color Blindness

By some estimates, up to 10% of the male population of the world suffers from some form of color blindness. The most common being Protanopia, or Red-Green color blindness, the inability to distinguish between red and green hues. There is also Blue-Yellow color blindness and Total Color blindness.

Good web designers spend an awful lot of time tinkering and tweaking websites to accommodate users using a huge variety of web browsers and even screen readers. This type of … Read article “Accessibility Basics: Testing Your Page For Color Blindness”


Accessibility Basics: How Does Your Page Look To A Screen Reader?

Good web designers spend a lot of time making their pages accessible. One way to think about accessibility is to think about the extreme case scenario of having every single thing deactivated on your site except plain old HTML. I’m talking no images, no CSS, no Flash, no Javascript. If you turn all these things off, does your page still make sense? Sure, it won’t be pretty. But is there a title still at the top? Is the navigation still … Read article “Accessibility Basics: How Does Your Page Look To A Screen Reader?”


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”