Here is a bona fide little CSS-Trick for ya’ll.

I knew I could make a “matrix” of squares with rollovers. Then I got to wondering if I could duplicate that matrix of rollovers elsewhere on the screen. I figured I could using the same technique as Remote Linking. Then I got to thinking I could make the rollover in the duplicate matrix different by using a different style of rollover.

The technique is pretty simple. The HTML for a single cell is just:

<a class="singlecell"><em>.</em></a>

The em element is what kicks over and constructs the second matrix.

The CSS is a little more complex, but it’s not bad. The em gets relative positioning and a right value of 200, so it just gets kicked to the right 200px. The regular anchor element goes red on hover, and the em moves background position. Each cell has display block, a width and height of 10px, and is floated left to create the matrix.

a.singlecell {
	width: 10px;
	height: 10px;
	display: block;
	color: white;
	background-color: white;
	float: left;
}

a.singlecell em {
	position: relative;
	width: 10px;
	height: 10px;
	right: 200px;
	display: block;
	background: url(images/cell-bg.gif) top;
	text-indent: -9999px;
}

a.singlecell:hover {
	background-color: red;
}

a.singlecell:hover em {
	background-position: bottom;
}

This isn’t exactly super-useful as it is, but its a kinda neat trick that I could see being adapted into something more interesting.

[LIVE EXAMPLE]

Theoretically Related Articles:

• Tag Cloud with Varied Padding Thickness
• Multiple Remote Linking: An Example and How-To
• Create Your Logo with Pure CSS
• Web Typography Study: The Design Canopy
• Designing the Digg Header: How To & Download