Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

So, let’s dive in and start building more exciting websites!

1. Extruded Text Effect

The footer of David DeSandro’s website uses extruded text that animates on mouseover. This interactive text effect is a quick and impressive way to add some flare to your website. With only a few lines of CSS3, we can make the text appear to pop out of the page in three dimensions.

Styling the Hover State

Here, we’ve added three more text-shadows to increase the depth of the extrude effect. But this effect alone is too flat; we want the text to look like it’s popping off the page. So, let’s reposition the text to make it appear to grow taller from the base of the extruded section:

Now in the hover state, the extruded text moves up the same distance as our max text-shadow value. We also added position: relative, which must be attached to the base state, not just the hover state, or else it will cause problems when we animate it.

Animating the Transition

Next, we can add a CSS3 transition to our text to animate the color change and extrude effect:

Shortcomings

While applying several CSS3 text-shadows works well when the text is static, it falls a bit short when used alongside the transition animation.

In short, the biggest text-shadow animates just fine, but the other text-shadows aren’t applied until the animation completes. This causes a quick correction: the browser stutters with a basic drop-shadow before filling in the rest diagonally.

Fortunately, we can make this drawback relatively unnoticeable, provided that we follow a few style guidelines. Basically, we want to hide the bulk of the extruded portion with the top text. This means that we should generally use this effect with bolder fonts, such as the Proxima Nova family used by David DeSandro. Also, we should be careful to avoid text-shadows that are too big for the font. Tweak your settings with this in mind until the animated extrude looks believable.

Finally, this technique will not work in IE, because text-shadow is unsupported in all versions of IE (even IE9).

2. Animating A Background Image

While we can easily animate text with a few lines of code, animating an image usually requires bigger and slower assets, such as animated GIFs or Flash or HTML5 video. While complex animations will still depend on these technologies, we can create a compelling illusion of animation using CSS alone.

Love Nonsense uses a hover effect to alter the color of the images on the website. The trick here is to use a transparent PNG with a background color. The color of the PNG should match the website’s background, so that all of the transparent areas in the PNG show up when filled with a background color. Thus, the PNG should contain the negative space of the image you want to display (i.e. the shape you want should be transparent, and everything else should be the same color as the background).

Here’s an example of the Smashing Magazine logo with negative space:

Notice in the demo how when the background color is set to orange, it starts to look more like the real thing.

Here, we’ve set up the post’s wrapper with position: relative and with enough padding on the left side to absolutely position the image to the left of our post. We’ve also added a background color to our image; so now the positive space in our PNG shows up as light gray.

Here, we’ve added a CSS3 transition to both the image and the title, which will make for a smooth color change animation.

Unfortunately, CSS3 transitions are not currently supported in IE9. However, even in unsupported browsers, the color change will still occur — it just won’t have a smooth animation.

If complete cross-browser support for the animation is important, you could always provide a jQuery version of the animation for unsupported browsers. Bear in mind, though, that jQuery’s animate() method does not support color animations, so you’ll need to use a color plug-in.

3. Mega Dropdown

One common design problem with dropdown menus is that they often contain a lot of items. Instead of presenting all of its items in a long single column, Bohemia Design uses a multi-column dropdown. This approach not only looks great, but provides an opportunity to group the links and highlight the most important ones.

…and use nav li a, nav > li or nav li to style the list items in the navigation. The child selector doesn’t work in IE6 and nav li would cause problems since there are additional LIs nested in the content area of the dropdown. If you absolutely need the site to work for IE6 users as well (and that’s what you sometimes will have to do), you’ll need to have markup similar to the original mark-up in this example:

Although a lot of the CSS is specific to our example, there are a few important styles to note.

First, we’ve defined a height and width for our overall tab area and matched the total height and width of all five tabs, so that we can position the dropdown correctly. Next, we’ve defined position: relative for the tab wrapper, which will allow us to position the dropdown absolutely.

Then, we added list-style: none to the list wrapper, and display: inline to each list item, to eliminate any list styling.

Let’s set display: table-cell on all of the column wrappers, so that they display next to each other. But table-cell is not supported in IE6 or 7, so we’ve used an attribute hack as an alternative for IE6 and 7. This hack places an asterisk (*) before each of the attributes that are specific to IE6 and 7.

Thus, we’ve defined a backup for unsupported IEs, which is simply float: left. This works almost as well as display: table-cell, except that the floated elements don’t match each other’s height, so the borders between columns don’t line up. To avoid this minor issue, we simply remove the border-left using the same asterisk hack.

Finally, we remove the left border from the first column for all browsers. Although the :first-child pseudo-class doesn’t work properly in IE6, fortunately it doesn’t make a difference, because we’ve already hidden the borders in these browsers.

Adding the Interaction

We’ve built the mark-up and styles for our dropdown, but we still need to make the menu interactive. Let’s use jQuery to add a class to show and hide the dropdown:

Here, we’ve attached a hover listener to each list item, which adds and removes the class main-nav-item-active. Attach this to the list item rather than the tab itself, or else the dropdown will disappear when the user mouses off the tab and into the dropdown area.

Now we can use this class hook to hide and show the dropdown with CSS:

Here, we’ve changed the background and text colors and rounded the top corners (in supported browsers).

Positioning the Dropdown

Now the basic mouse interaction has been built and the dropdown displays on mouseover. Unfortunately, it is still not positioned correctly under each tab, so let’s add some more code to our hover events:

Here, we use jQuery’s position() method to get the left offset from the current tab. We then use this value to position the dropdown directly beneath the appropriate tab.

However, with the tabs on the right side, the dropdown menu will end up poking out of the tab area. Besides looking bad, this could lead to overflow issues, with portions of the dropdown falling outside of the browser window.

Here, we start by finding the overall width of the tab area. Because recalculating the width for each tab is not necessary, we can define it outside of our hover listener.

Next, we find the width of the dropdown and determine the maximum left value, which is the overall tab width minus the width of the dropdown.

Finally, instead of always positioning the dropdown directly beneath the tab, we use the Math.min() method to pick the lowest between the tab offset and the maximum left value.

Thus, we confine the dropdown to the area beneath the tabs and avoid any content issues.

Other Approaches

While this script is fully functional, we could still improve the user experience. Currently, when the user mouses away from the dropdown, the menu hides immediately. You could build a delay using setTimeout() to ensure that the dropdown remains visible when the user mouses away and then quickly mouses back. This creates a better experience, because it avoids hiding the dropdown during accidental movements.

If you’d rather avoid setTimeout(), you could also look into the hoverIntent jQuery plug-in, which makes fine-tuned control over mouse actions much easier.

Besides improving the user experience, you could also avoid jQuery altogether in all browsers except IE6.

Instead of using jQuery’s hover() listener, we could use the CSS pseudo-class :hover to hide and show the dropdown.

One downside with the CSS-only solution is that you can’t build a delay for the :hover pseudo-class.

Also, you will have to position the dropdown manually under each tab to avoid the overflow issues. Alternatively, if you aren’t concerned with overflow issues, you could attach position: relative to each list item and avoid setting any positions manually.

Finally, if you’re supporting IE6, make sure to include the script above as a backup for IE6 (but don’t include it for other browsers).

Here, we’ve defined the dimensions of the slideshow, along with overflow: hidden to hide the other slides in the reel. We’ve also defined the dimensions of the reel: with six slides at 900 pixels each, it is 5400 pixels wide. (You could also just set this to a really high number, like 10000 pixels.) Then, we absolutely positioned the reel inside the slideshow (which has position: relative). Finally, we defined the dimensions for all of the individual slides and floated them to the left to fill up our reel.

Here, we’ve started by creating the function changeSlide(), which animates the slide reel. This function accepts an index for the next slide to show, and it checks to make sure that the value isn’t too high or low to be in the reel.

Next, it animates the slide reel to the appropriate position, and then finishes by setting a new timeout to trigger the next iteration.

Finally, we’ve built the function nextSlide(), which simply triggers changeSlide() to show the next slide in the reel. This simple function is just a shortcut to be used with setTimeout().

The Left and Right Navigation

Next, let’s set up the left and right arrows in the slideshow, starting with the mark-up:

We’ve positioned the arrows absolutely within the slideshow frame and added an opacity change on hover. In our example, we’ve used a CSS triangle trick to style the arrows with straight CSS, but feel free to use an image if you want richer graphics.

Here, we’ve added quite a bit of new interaction. First, look at the bottom of this script, where we’ve added click event listeners to both of our navigational items.

In these functions, we have first set activeSlideshow to false, which disables the automatic animation of the reel. This provides a better user experience by allowing the user to control the reel manually. Then, we trigger either the previous or next slide using changeSlide(). Next, in the changeSlide() function, we’ve added a clearTimeout(). This works in conjunction with the activeSlideshow value, cancelling any hanging iteration from a setTimeout.

Finally, in the callback of the animate() function, we’ve added some code to hide and show the arrow navigation. This hides the left arrow when the slideshow is showing the left-most slide, and vice versa.

Animating the Bottom Navigation

The basic slideshow works with the previous and next arrows. Let’s take it to the next level by adding the animated navigation. Please note that I am using a more complex markup because it avoids the use of images and is ultimately simpler. It would have to use three background images otherwise — one for the center sections and one for each cap to allow the clickable areas to be larger). However, you could clean up the bottom navigation with a background-image.

First, we’ve included a second animation in changeSlide(), this time to animate the active indicator in the navigation. This animate() is basically the same as the one we built for the reel, the main difference being that we want to move it only 150px per slide.

Finally, we added a click event listener to the items in the bottom navigation. Similar to the arrow navigation, we start by disabling the automatic animation, setting activeSlideshow to false. Next, we trigger changeSlide(), passing in the index of whichever slide was clicked, which is easy to determine using jQuery’s index() method.

Now the slideshow navigation animation is complete and ready to impress your visitors.

5. Animated Icons

CSS-Tricks has a simple but elegant effect in its footer when the user mouses over various buttons. Besides the color changing and an icon being added, the effect is animated in browsers that support transition, making the icon appear to slide into place.

Here, we’ve added a few important styles to accomplish the hover effect. First, we’ve attached the background image to our .hover-panel. This is normally positioned outside of the button, but on mouseover, it is placed correctly. Also, note that we’ve placed it off to the right side of the panel, so that when we apply the transition animation, the icon will slide in from the right.

The transition effect triggers the animation of the background image. Because we’ve flagged it to apply to all attributes, the transition will also be applied to the background-color change that we applied above.

Although this works in most modern browsers, it will not work in IE9. But even in unsupported browsers, the user will see the color change and icon; they just won’t see the animation effect.

On most websites, this enhancement wouldn’t be necessary for all users. But if support is a priority, look into this jQuery back-up.

Final Thoughts

In this article, we’ve walked through a variety of interactive techniques that can add a bit of style and creativity to your website. Used correctly, techniques like these enhance websites, creating a more engaging and memorable user experience. But be subtle with the interactivity, ensuring that the bells and whistles do not get in the way of the website’s primary function, which is to providing meaningful content.

What do you think of the techniques presented here? Do you know of any ways to improve these scripts? What are some other interactive techniques that you’ve seen around the Web?