I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them.
The guys from DOCTYPE told me it was their inspiration for the navigation on their website. They are doing it just like I would have, with CSS3 gradients and jQuery. So I decided to snag their code…
Have you ever wanted to absolutely or relatively position a table cell? Well, I can’t help you there. Table cell elements just won’t take those position values. And thus, you also can’t absolutely position elements within the context of those elements either. I can help you out with that issue.
Got a couple of slightly-oldie-but-goodies for you:
…
Reader Nicolas writes in:
I’m frequently seeing ID and class specifications to
<body></body>and<html></html>elements. I’m curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS?
I got an email quite a while back from Dirk Tucholski who showed me a site called FLOWmarket. He was wondering about how the menu system worked. I thought it looked neat and so set out to build it how I would do it. The idea is that there is a long vertical menu of links, not all of which are visible. As you scroll your mouse up and down the visible area, the menu scrolls itself to reveal…
From the source code:
this site is by Paul Irish
i made it cuz hsla is wayyyy cooler than rgba and more sensible too!
HSL is better than RGB. The reason it isn't used as much (according to me) is because you can't get HSL color values out of Photoshop. Hence, tools like this and my own.
Lea Verou with a clever idea on using CSS3 gradients that repeat (by setting background size) to create striped and checkboard backgrounds with no images.
Harry Roberts  with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions.
Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.
