Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you want your navigation to really pop off the page, what better approach than to apply a 3D look and feel? I've seen numerous examples where one or more elements of a web page appear to be in front of the other page areas. Let's take a look at a number of sites that incorporate 3D design techniques into their navigation. The first one is from a company called Mystery Tin. Here on the vertical navigation over on the left, you can see that the ribbon appears to wrap around the white rectangle that contains the navigation.
And as we scroll down and hover over the various ones, that pattern is followed with a different-colored ribbon that's also a little bit shorter, ao it indicates places that you could go but not necessarily places that you're at. And if we choose one, just to see what happens when we select the page, you can see that the larger green arrow again is being applied to show that this is the current page and then everything else is back to the shorter blue arrow, but always with the appearance that it is three dimensional.
This simple well-executed concept uses a sprite image to display the two different arrows. We'll cover sprites in the Navigation Techniques chapter. Now, let's take a look at another site that uses a similar 3D wrapping technique but takes it a step further. Here you can see the ribbon wrapping around the top dark-brown element, giving that 3D appearance. And the text itself seems to be pressed into the ribbon. When you interact with the menus, hovering over them, they take on a highlight color.
While this page is done with simple image swapping, this could now be accomplished with enhanced CSS3 effects, like the one shown in the chapter on cutting-edge navigation. Finally, let's take a look at a menu that adds a touch of movement to the 3D approach. Here down a little bit below you can see the tabs definitely have the 3D appearance working for them. And when you hover over any of them, they move up just a tad. This could be accomplished with CSS3 transformations, which is also covered in the chapter on cutting-edge navigation.
All of these 3D designs are accomplished without resorting to using the z-index property in CSS, although that is also an option.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.