Visual Effects
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/ of information regarding how to accomplish the effect. |
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).
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).
CSS Pop-Ups
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).
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.
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.
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).
| |||||||||||||||||||