When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.
When designing for the web, there is no physical byproduct in which to match color. We designed it on a screen, for a screen. So what does calibration matter?
Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it’s :hover, change the background-image. It’s best practice to combine both images into one and shift the background-position rather than use two separate images, that’s the idea of CSS sprites. But what if you want to fade one image into another, not just have an abrupt shift?
A WebKit-only demo of a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely.
You can set a max-width on the html element which helps keep fluid width sites under control with zero extra markup. Plus it’s got pretty good browser support with a No Big Deal™ fallback.
I made a page with the shapes you can make with a single HTML element and CSS. Here is an example:
The CSS you see on the page is the real CSS rendering that shape, and it also editable, so feel free to tweak it right there. I’d love to expand it if anyone has more ideas!
Just in case anyone doesn't read Smashing Magazine, Eric Meyer has a long excerpt from his latest CSS book here which is loaded with good stuff. I particularly liked the bit about clearing :nth-child elements combined with media queries.
I bet a lot of you are using @font-face in your designs. It's probably worth updating to this new syntax, which deals with IE9 and Android better than previous popular methods.
Sam Collins with a big writeup on his experience using media queries and comparing them against other mobile optimization techniques. There are lots of good practical tips to use inside your media queries like:
Some great tips in the comment thread as well.
Pseudo elements are visible elements on a web page that aren't "in the DOM" or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo elements are CSS 2, so browser support for them is pretty good!
Links from Video:
