Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and tried doing it with JavaScript instead. You can view source on that page to see the simple code. It’s just recursively calling a function to change the letter with a slight delay until the letters stored in a Array are up, then changing back to it’s original letter.
As a follow up to asking people if they are using HTML5 or not, I asked the people who are:
What features of HTML5 have you used on production sites?
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.
Funny article from Thierry Koblentz on CSS selector efficiency. Although there are cases where multiple ID selectors are needed, a selector like #nav li ul li a#active is almost certainly too heavy and inefficient.
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.
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:
