Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Advanced Uses of FACE

Last updated Oct 17, 2003.

I’ve introduced you to FACE, my technique to create easy web site animation, officially named Faruk’s Animated CSS Enhancements. I’ve shown you how to implement it on your web site. Now it’s time for me to show you what all is possible with FACE, or at the very least, give you a good look of this world of endless animation possibilities.

When splash pages were found to do more harm than good to the user experience, a result of forcibly delaying the user from reaching any content and often requiring an extra click to continue, web sites were sent back to their static origins. The rise of Flash introduced eye-catching, animated headers and logos, but Flash had certain limitations and drawbacks that could outweigh the advantages of having a lively page once again.

A new technique called FACE, short for Faruk’s Animated CSS Enhancements, is here to offer a different solution to some of the problems we face (no pun intended) when creating web sites. In our previous articles we introduced you to FACE and showed you how to implement FACE in your web sites, whether you want to retrofit an existing site or are creating a brand-new one. Now is the time to show you some examples of how versatile FACE is, as well as explain how you can be more creative with it.

Incredible Freedom with CSS Animation

For this article we will assume that you have read the previous pieces and already know how to implement FACE in your web sites. The question now is: what exactly can you do with it?

The answer is: almost anything. While FACE is not as technically sophisticated as Flash — there are no scripted events of any kind taking place in FACE animations — it does offer a great amount of creative freedom. Flash offers you all manner of interactive scripting and complexities, but it is all confined within one rectangular, embedded object. FACE animations utilize the HTML elements in your page themselves, and are limited "only" to all the elements within your body. This offers you integration freedom in ways that Flash doesn’t even come close to.

Since the animations in FACE are controlled entirely by CSS, you have the world of CSS styling and positioning at your disposal, but now in animated form. This gives you the ability to play around with margins, padding, positioning (absolute and relative), text colors, background colors, font styles and sizes and so much more. Let’s take a look at some examples of what all is possible.

Slide, Fade, Combine

Our first example shows a page with four boxes. Each box features a background image in the top area of the box, a title for each section and a small one-paragraph description.

When you open this page in a modern browser and have JavaScript enabled, you will see that the background images slide into view from the top, the titles slide in from the left and the descriptions fade in from white to black. Each of the four boxes has this animation happen in sequence, which means that effectively, there are twelve animations occurring in total.

What takes place under the surface is that only four containing elements get the FACE animation, but thanks to the CSS’s descendent selectors we can style elements within the containing element, rather than the containers themselves. This principle works just as well in animated sequence as it does in static form.

Let’s start with a quick example of the XHTML markup for this example:

	<div id="enhance" class="C:container:15:L:30:80">

		<div>
			<div id="title1">
				<h3>A title</h3>
				<p>A brief description; the actual example has more text here.</p>

			</div>
		</div>
		..
	</div>

The first div element is the FACE-triggering element. The empty second div is the container for each section; the third div is also a container, but contains unique id attributes for each section so that we can have four unique background images.

The third div would be unnecessary had Internet Explorer supported CSS 2 selectors properly, as that would have allowed us to use the Adjacent Sibling selector to create four unique background images. Sadly, CSS 2 selectors are only partially supported in IE6, which is currently the most popular browser and thus cannot be ignored.

The CSS for this example* may seem daunting at first glance, but it’s all pretty standard stuff:

	#idselector .container0 div { background-position: 0 -150px; color: #FFF }
	#idselector .container1 div { background-position: 0 -140px; color: #EEE }
	...
	#idselector .container14 div { background-position: 0 -10px; color: #111 }
	#idselector .container15 div { background-position: 0 0; color: #000 }

And:

	#idselector .container0 h3 { text-indent: -15em }
	...
	#idselector .container15 h3 { text-indent: 0 }

(* note: the XHTML and CSS are different from the example’s real XHTML and CSS due to the example being a production site)

The "#idselector" is added to increase the CSS specificity of the animation CSS. Chances are that you already have a good amount of styling applied to the elements that you want to animate, so to overrule that styling (in case it conflicts with the animation’s style rules) we give the animation CSS a higher specificity. Read more about CSS specificity if you aren’t quite familiar with it yet.

In the above CSS you can see that we have two CSS properties being applied to the "div" element that is found inside the container: a background-position and a color. The background-position slides from "0 -150px" (-150 pixels to the top, 0 pixels to the left) to "0 0" (top left, default position) over the course of 15 steps. At this same time, the text color in that div fades from white (the background color) to black, making it visible.

The second bit of CSS shoves the title (h3 element) into the box through the text-indent property, going from -15em to 0. Since this is a separate element that we’re styling, we can’t combine the two sections of CSS. If we were to add the text-indent CSS rules to the first bit of CSS, the description text would flow wildly across the page, thanks to being indented as well.

Shake It Like a Polaroid Picture

Our second example is of a more interactive kind: when hovering your mouse over any of the thumbnail links, you will see the thumbnail shake about for a little while.

This example shows that using FACE’s onMouseOver trigger can offer usability benefits to all who use a modern browser, at no real disadvantage for those without (or those on mobile devices).

The XHTML used in this example is pretty much as simple as can get:

	<ul id="enhance" class="C:shake:11:MO:40:80">

		<li><a href="#"><img src="..." /> Link name</a></li>
		..
	</ul>

The CSS needed to create the shake effect isn’t that much more advanced, but it requires close observation:

	#selector .shake0 a:hover img { margin: 4px 3px 4px 5px }
	#selector .shake1 a:hover img { margin: 4px 5px 4px 3px }
	#selector .shake2 a:hover img { margin: 4px 3px 4px 5px }
	#selector .shake3 a:hover img { margin: 4px 5px 4px 3px }
	..
	#selector .shake11 a:hover img { margin: 4px }

The img element has a default styling of margin: 4px; This gives us the freedom to decrease the margin a little on one side while increasing it on the other side at the same time, thus preventing any reflow of content. In doing so in a repeated, alternating fashion, we see a little shake-effect. We end the effect by returning to the default position, so that there is a nice transition going back to static form.

Of course, the real clue here is that we can go in any dimension with this concept. As explained before, FACE can influence any element within the body of your document, so this effect is not limited to images. We can apply it to content boxes, text, images, list items, anything.

In Perfect Unison

The third and final example shows that we don’t always have to specify FACE to use Child elements (node 1 in the construct, the "C") for our animations. Instead, a lot can be accomplished by targeting the element itself ("S" in the construct). In this fashion, by targeting multiple elements that the element contains, using CSS descendent selectors, we can have a smoothly synchronous animation running.

In the case of the example, we have an unordered list with four list items, and each item contains a div and a span. You may consider this to be a lot of superfluous elements for something that is more flair than anything else, but it does a great job at showing just how complex and sophisticated you can get when playing around with FACE.

The markup:

	<ul id="enhance" class="S:complex:30:L:20:50">

		<li><div><span></span></div></li>
		<li><div><span></span></div></li>
		<li><div><span></span></div></li>

		<li><div><span></span></div></li>
	</ul>

The CSS that makes this example’s magic happen is a lot trickier, on the other hand. What happens is that, at the same time, the boxes become larger, their margins smaller and the border color fades from almost-white to black. A few lines from the CSS:

	#idselector .complex0 div { margin-top: 40px; width: 1px; height: 0; border-color: #f2faff }
	#idselector .complex1 div { margin-top: 38px; width: 6px; height: 6.8px; border-color: #e6edf2 }
	#idselector .complex2 div { margin-top: 36px; width: 11px; height: 13.6px; border-color: #dae1e5 }
	#idselector .complex3 div { margin-top: 34px; width: 16px; height: 20.4px; border-color: #cfd4d8 }

To add to that, there is also a set of proprietary CSS to create a transparent effect after the boxes have been sized and positioned properly. The CSS is partially proprietary because the CSS property "opacity," which stems from the CSS 3 Color module, has not been implemented across many browsers yet.

The real trick in this example is that the picture used in the animation is a background image set on the unordered list itself, not as four separate pieces on the boxes. The animation just creates four color-filled boxes on top of it, and the transparency effects slowly remove the fill from the boxes, letting the background image show through.

All the above are mere examples of what can be done with FACE. They are nothing but the tip of the iceberg, but they give you a taste of the possibilities. The real power in FACE lies in your own creative thinking, your own ability to come up with complex CSS constructions and animating them using FACE’s easy, plug-and-play integration. That’s what will ultimately let you use FACE in ways that inspire and aid your users.

In the next article in this series, we will look at some of the common pitfalls and problems you may run into when using FACE.