Lab 7: CSS3

In this lab, you will work with the CSS3 features.

Objectives:

• To work with CSS3 transitions
• To work with CSS3 animations

Part 1: Adding a Transition to the Navigation Menu

In this part, you will add a transition to the pizza parlor's navigation bar.

Steps:

1. Use File - Close All to close all open editing windows.

2. To help you get started, we will provide a project that contains some images you can use. Follow these steps to import it into your workspace:

   1. From the RAD menu, choose File - Import to start the wizard.

   2. On the first wizard page, expand the General category and select Existing Projects into Workspace, then press Next.

   3. On the next page, click the Select archive file button, then press the Browse button and navigate to {Lab Installation Directory/starters/lab07. If your computer has the standard lab setup:

      c:\Users\username\webclass\starters\lab07               
                     

      Select lab07.zip and press Open followed by Finish.

      You should see the Lab07EAR and Lab07Web projects in the Enterprise Explorer.

   4. Expand the Lab07Web project's WebContent folder and note that it has versions of the pizza-parlor pages.

3. Modify the navigation elements on each page so that when the user hovers the mouse over an item, the background-color change works as a transition and the the font-size also increases as a transition.

4. Next, use an animation so that the "Order now!" link on index.html font-size is x-large with an intermediate large frame. Trigger on the animation when the user hovers the mouse over the link. Note that you may need to use vendor prefixes, depending on your browser.

5. Next, use a transform so that the size of pictures of menu items (e.g. the sandwich) increases when the user hovers the mouse over them. Note that you may need to use vendor prefixes, depending on your browser.