Be the first to write a review
Making Cool Stuff with Advanced CSS Animator
Practical applications and how you can make use of this new tool in your everyday workflow
Last time, Nancy introduced you to the DMXzone Advanced CSS Animator and showed you the basics for using it, along with some very basic examples. In this installment, Nancy will show you practical applications and how you can make use of this new tool in your everyday workflow.
A Simple Image Gallery
In this example, we are going to create an image gallery using HTML, CSS and the Advanced CSS Animator, which will add supporting javascripts for browsers that don't support CSS Animation as yet. This is one of the best things about the Advanced CSS Animator, because you don't have to worry about what browsers can see your work and which ones are going to bomb out. It will just work everywhere and there is no Flash required.
Start with a new blank HTML page and save it as mygallery.html. To give some structure to the page, create a container div to center the gallery and an image container div within that container. We'll also create a third div below the image container to hold the controls. Here is the HTML for the basic page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="imagecontainer">
<!--end imagecontainer --></div>
<div id="controls">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--end controls --></div>
<!--end container --></div>
</body>
</html>
That doesn't look like much if you take a look in Live View or a browser. So let's add some basic CSS to tidy it up. We want the container to center our gallery in the browser, so we'll give the container a width and set the margins to automatically center no matter the size of the browser. Here is the container CSS:
#container {
width: 800px;
margin: 0px auto;
}
You can use whatever width you want for your container, but keep in mind that without a width, the autocentering doesn't work.
Next we're going to define the size of the image container. I have already created my images to be 400 px by 300 px so those are the dimensions of my image container as well. I want to center it within the container as well so I have specified that in the CSS for the image container. I have also set the overflow to hidden so there won't be anything leaking out the sides anywhere.
#imagecontainer {
height: 300px;
width: 400px;
margin: 0px auto;
overflow: hidden;
}
You may have noticed in the HTML that I used an unordered list for my controls, which are numbers 1-4 since I have only 4 images in my gallery. Obviously the number changes to match the number of images if you are making a larger (or smaller) gallery. In the CSS for the controls, I will specify display to be inline so the list items are side by side in one row. The CSS for the controls follows:
#controls ul li {
display: inline;
margin: 0px 3px 0px 3px;
background-color: #CFC;
padding: 0px 8px;
}
I have also put a light yellow background to give more of a block appearance to the controls so they aren't just a number out there and I added a little horizontal padding to spread them out a little. The last thing I have done is to place the images into the image container on top of each other with the first image on top.
Because I have hidden the overflow, this in essence stacks the pictures and now I can use the Advanced CSS Animator to change what is in the image container depending on the control selected. There are many ways one could do this and we'll look at few.
One of the easiest, in my opinion is to stack the images and hide or show the image depending on the control selected. This is similar to the old JavaScript Show/Hide behaviour, but this Is done using CSS. The Advanced CSS Animator makes it point and click easy.
The simple html and css interface showing the first image in our gallery
Nancy Gill
In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".
Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.