With CSS3 becoming more and more supported by modern browsers, and jQuery making JavaScript effects easier to implement by more people, we have to think about a webpage as something that is four dimensional and not two.This is only a basic cover of the subject so do not expect in-depth explanations just key concepts.

Kill 2D Designs with Z-Index

First you have to think about websites beyond two dimensions. This might sound odd, but you have to step back and make should the foundation for the ‘next dimension’ is there. An understanding on the z-index is critical. Z-index gives a value of the third dimension. Think of a website as as a coordinate grid, with an axis coming through the center vertically. Z-index defines that value, so now instead of your website being made out of a flat piece of paper, it is now a box, book, room, or building.

The z-index tag only works if the position element in css is defined, so the global selector works very well here by setting every element in the DOM as positioned relative then the z-index will work, and always work. With z-index you can hide things tell things to move in front of other things, think like playing with Photoshop layers. This also makes converting over from them easier because not as many things have to be changed structurally, every layer could very well stay in the same place, but it could end up being a few thousand layers using id. Not exactly ‘best practice’ but it works surprisingly well.

Stepping into 4D

Our easiest tweaks are momentary ‘oh that’s kinda cool’ type animations. Start by identifying any code within your CSS that will change due to a user action. First thing that should come to mind is the area tag, the one that makes hyperlinks possible.

This tag has css for psuedo-styles defined, hover and active, these styles will change based on where the mouse is on the link and if the link is being pressed. Identify what styles are being change and if you want them done instantly if the answer is no, then in the parent of that element if it is a psuedo selector, else just in the elements styles; in the case of a, you can put it in a, a:link and a:visited. Using transitions you can now select what styles you want animated when they change and how they change and over what period, welcome to the fourth dimension.

The Though Process

Moving on try key-frames. Here you are defining the cascaded css through a timeline. Try to define elements in relationship to other elements to prevent major hassles. Group elements that move in reference to themselves first, then them as a group in reference to something else, then in reference to whatever else, ending in reference to the body.

After all of this you have to remember that all this 4d stuff is just flutter and feedback, it shouldn’t be the focus of the website that would kill user experience as much as this shift in thinking helps it.

Keep these thoughts in mind:
“I touched this, shouldn’t it have moved?”
“is that an ad? ignored”
“Why is it moving I WAS READING THAT!”
“I think its frozen, wait wait there it goes.”