xy.css

By combining the vertical grid and horizontal grid, we establish a two-dimensional (2D) design matrix for creating precise, rhythmic CSS designs. But we can go even further by considering the “z-axis” to bring a third dimension to the CSS matrix.

On the web page, the z-axis represents the relative distance “above” or “below” other design elements. For example, when setting a value for the z-index property you’re effectively raising or lowering the position of the target element along the z-axis. If you think about the web space in terms of width, height, and depth, you’ve pretty much got the idea.

As with the horizontal grid (x-axis) and vertical grid (y-axis), incorporating the z-axis into the CSS matrix is a matter of calculating values based on consistent units of measurement (e.g., pixels, percentages, etc.). To see how this works, let’s look at a rather contrived example..

A rather contrived example

Let’s say we’ve got the following three boxes:

.box-01 { width: 33.333%; height: 108px; }
.box-02 { width: 33.333%; height: 108px; }
.box-03 { width: 33.333%; height: 108px; }

Thanks to the height and width values, these boxes snap to the vertical and horizontal grid, or 2D CSS matrix. The 3D matrix comes into play when we begin applying CSS properties that affect box positions along the z-axis. To illustrate, we can use the z-index property:

.box-01 { width: 33.333%; height: 108px; position: relative; z-index: 1; }
.box-02 { width: 33.333%; height: 108px; position: relative; z-index: 2; }
.box-03 { width: 33.333%; height: 108px; position: relative; z-index: 3; }

This is an example of 3D-matrix design. The assigned z-index values correspond to consistent increments along a perpendicular axis: 1, 2, and 3. So if we could turn the web page to view the flat boxes from more of a side-view, we would see that the first box is 1 unit above the screen, the second box is 2 units above, and the third box is three units above. Thus, the boxes are positioned according to a 3D CSS matrix.

Implications and considerations

If you’re familiar with CSS you know that, in our example, there would be no way to actually “see” the boxes as positioned along the z-index grid. Viewing the boxes on-screen, they would appear to exist on the same plane, without distinction in that regard.

So what’s the practical use of a 3D matrix? Admittedly it’s mostly theoretical, but CSS properties such as box-shadow and text-shadow affect the appearance of elements on the page and thus may be aligned along a z-axis (or perpendicular) grid. This eliminates guess-work and enables more precise application of CSS styles.

Designing with 3D matrix is also practical in the sense that it helps to organize z-index positioning on the page. For example, instead of using the all-too-common brute-force method of z-indexing:

.logo { position: relative; z-index: 99; }
.nav { position: relative; z-index: 999; }
.feature { position: relative; z-index: 9999; }

..we can apply principles of grid-based design to assign consistent z-index values to all design elements. This enables us to organize elements on distinct “planes” within the design. This can help simplify complex designs while bringing further rhythm and harmony to the web page.