I will not be talking about fonts. Jeff Veen is here and is the guy to talk to about fonts.  I still think New Century Schoolbook is all that and actually still use Arial.

“These are what I refer to as rectal statistics, because of where they came from.” -Eric Meyer

The Box Model

box-sizing

With box-sizing (CSS3) we can get rid of the inner content div. No column drop, real easy. That’s basically all I have to say about that. Box-sizing is supported by every major browser today. Vendor specific code may be necessary.

@media queries

Different layouts based upon different media. Wide layout, narrow and mobile.

Sliding Doors

Because every loves the tabs, right? Use border-radius instead of images and you’re done. It doesn’t need to be on li’s, it can be used on the a tags. When styling selected tab, just say a.c (or current/selected) set different background color. One of the strength’s of sliding doors is having icons and irregular outlines on each tab.

Complexspiral Demo

Instead of layering and positioning background images, use rgba colors [background: rgba (0, 0, 0, 0.5);] and make menu items slightly transparent. Background: hsla is also possible.

“There’s the awe of the cleverness of the hack, but then the disgust of having to use a hack.” -Eric Meyer

Zebra Striping For Tables

Instead of table row odd/even, etc, use nth child. Calculations start from zero, which is the reason for 2n-1, 2n+1 would work just as well.

tbody tr:nth-child (2n-1) {background: #DDE;}

Highlight every election year th column

tbody tr td: nth-child (4n-2) {background: #AEA;}

Don’t let the variables or calculations confuse. Load it up and change variables, as needed.

Where does nth child work? In lots of browsers.

Tags: aea