Beyond the Browser

Visual Effects

In this section, I'm going to show you a number of my favorite visual effects created by Eric A. Meyer for CSS Edge, which is a portion of Meyer's website dedicated to using CSS to create unusual designs that use web standards, no scripting, and no proprietary extensions.

For that reason, not all the effects will be available on all browsers, but each of these effects are impressive in what they allow a designer to do.

Note 

 CSS Edge is available at www.meyerweb.com/eric/css/edge/. Since Meyer has complete details on how to achieve these various effects on his site, I won't step through that here. What I will do is point out the effects that I especially enjoy, as well as a bit of information regarding how to accomplish the effect.

The idea here is to inspire. As the CSS Edge site itself says: 'Steal these ideas and use them yourself, or better yet, build on these ideas and do something better!'

Complex Spiral

The complex spiral page, www.meyerweb.com/eric/css/edge/complexspiral/demo.html,(see Figure 8.14) shows off several nice CSS effects, including an opaque look that creates a nicely enhanced navigation system (8.14A), as well as an attractive content area (8.14B).

Figure 8.14: A portion of the complex spiral page

As the mouse passes over a navigation item (Figure 8.15), the background of the item changes, making the graphic background of the page appear as though it is coming to the forefront (Figure 8.16).

Figure 8.15: Kat's navigation link, normal state

Figure 8.16: Kat's navigation link, mouseover state

The effect is subtle, but the visual results create movement and clarity. What's more, the simple navigation and layout make the page an attractive and dynamic design.

CSS Pop-Ups

This is an effect that can be employed using text or images, and CSS Edge shows both in action. In the past, these types of pop-ups could only be achieved using technologies such as JavaScript or Java. But being able to create these effects with CSS makes the entire process not only easier to manage, but also to style in a variety of ways.

In the normal state, the navigation options appear as they do in Figure 8.17. Figure 8.18 shows what happens as the mouse passes over a navigation link (8.18A)-the associated text pops up at the bottom of the navigation (8.18B).

Figure 8.17: Navigation links, normal state

Figure 8.18: Navigation links, mouseover, with text based pop-ups

In Figure 8.19, the same navigation options are seen, but in this case, mousing over the option causes an image to pop-up at the bottom of the navigation.

Figure 8.19: Navigation links, mouseover, with image-based pop-ups

CSS Menus

Another impressive effect that performs functions (as with all three of these samples from CSS Edge) without relying on scripting is the CSS drop-down menus that have been created by applying the :hover pseudo selector to an element rather than only the anchor element.

Figure 8.20 is the page without any of the menus activated.

Figure 8.20: The menus on this page look normal and innocent.

But, when you view the page in a supporting browser (in this case, Mozilla), the :hover selector is applied to the list item. That, with positioning, creates a hierarchical, linked navigation menu (Figure 8.21).

Figure 8.21: CSS-driven hierarchical menus