hey look what i can do with css

This is a proof-of-concept demo of a CSS technique I "invented" while working on the redesign of Shacknews.

This page does not contain Javascript. It's all done using CSS.

The red boxes you see to the left are spans contained inside links. The links are absolutely positioned inside an outer container (grey). The spans (red) are absolutely positioned inside the links. There is a bunch of text in the links, but you can't see it at the moment because the spans and the links are the same size.

Hover over Part 1 to read more.

Part 1 The Part 1 span is now green. The link that contains the span is blue and has expanded to fill the entire containing box (grey). Now the text you couldn't see before is visible. Try moving your mouse out into the blue area. You will see that you're still hovering over the link. Even though the blue link is covering the entire containing box (grey), the other spans (still red) are visible because their z-index is higher than the hovered link (blue). Hover over Part 2 to continue.
Part 2 This CSS for this demo is pretty ugly. To better understand what is going on, check out the original article linked below. Hover over Part 3 to read more.
Part 3 Remember that inline elements cannot contain block level elements. That means you can't put paragraphs or lists inside the links. You'll need to use inline elements and CSS to fake it. For example, all the "paragraphs" you see inside the blue links are actually spans made to look like paragraphs with CSS. Also remember you cannot have an link inside of an link. Because of this fact, this technique is best used in for small things, such as a dynamic label for a list of icons. Check out the demo linked below for a good example.

Danger

This demo is totally impractical. It was created as a proof-of-concept companion for an article I wrote. Please don't take this code and try to adapt it to your needs. There are many clean and usable ways to do dynamic content. This is not one of them.

hey look what i can do with css

Danger

Back to the Article