4Lesson 4: Using Advanced CSS3 Techniques · 4Lesson 4: Using Advanced CSS3 Techniques Objectives By the end of this lesson, you will be able to: 4.1: Apply 2D and 3D transformations

4Lesson 4: Using Advanced CSS3 Techniques Objectives By the end of this lesson, you will be able to:

4.1: Apply 2D and 3D transformations with CSS3.

4.2: Apply transitions and animations with CSS3.

4.3: Create accessible user interfaces with CSS3.

4.4: Create menus and buttons with CSS3.

4.5: Create transparencies and overlays with CSS3.

4-2 Advanced HTML5 and CSS3 Specialist

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0

Pre-Assessment Questions 1. Which type of CSS3 effect allows you to rotate an element clockwise to a new position

without animation?

a. Scale b. User interface c. 2D transformation d. Transition

2. Which type of CSS3 effect allows an element to gradually change styles from one to another?

a. Transition b. Box sizing c. Accessibility d. Transparency

3. What are three CSS3 user interface features?

Lesson 4: Using Advanced CSS3 Techniques 4-3


Introduction to Advanced CSS3 Techniques CSS3 provides more than formatting and text effects. It also provides advanced image and animation tools that enable the developer to create a more visually stimulating site. Once you learn to use these tools, you must apply your own creativity to implement them on your site.

CIW Online Resources – Movie Clips Visit CIW Online at http://education.Certification-Partners.com/CIW to watch a movie clip about this topic.

Lesson 4: Advanced CSS3 Techniques

CSS3 2D and 3D Transformations Transformations, or "transforms" as they are sometimes called in CSS, use the CSS3 transform properties to allow elements to rotate, move, flip and stretch. The W3C defines a transform as an effect that changes an element’s shape, size and/or position. Elements can be transformed using 2D or 3D transforms. Table 4-1 describes the CSS3 2D and 3D transform properties.

Table 4-1: CSS3 2D and 3D transform properties

Transform Property Description

transform Applies a 2D or 3D transformation to an element

Transformations include rotating, moving, skewing, scaling and so forth

transform-origin Allows you to change a transformed element's position

transform-style Specifies whether child elements will retain the parent element's position in 3D space

perspective Specifies the perspective from which a 3D child element is viewed by defining how far it is placed from view (in pixels)

perspective-origin Specifies the bottom position of a 3D element

backface-visibility Defines whether or not an element is visible when it is rotated to face away from the viewer

The transform property is supported by IE10+, Firefox and Opera. At the time of this writing, Chrome 34 and Safari 7 required the prefix -webkit- to view transforms, and IE9 requires the prefix -ms-

CIW Online Resources – Online Exercise Visit CIW Online at http://education.Certification-Partners.com/CIW to complete an interactive exercise that will reinforce what you have learned about this topic.

Exercise 4-1: CSS3 2D and 3D transform properties

OBJECTIVE 4.1: CSS3 2D and 3D transformations transform A CSS3 effect that changes the shape, size and/or position of an element.

NOTE: Recall that "webkits" are sometimes required for certain browsers to use CSS3 properties. You must list them on their own line of code with the appropriate prefix: –webkit- (for Safari) -o- (for Opera) –mozilla- (for Firefox) –ms- (for IE)

®

®



2D transformations CSS3 2D transformations allow you to format your elements using a flat, two-dimensional effect. Commonly used 2D transform methods are rotate() and scale(), which you will use in this lesson's lab. Table 4-2 describes the 2D transform methods.

Table 4-2: CSS3 2D transform methods

2D Transform Method Description

rotate(angle) Rotates the element clockwise at the specified degree

Negative values rotate the element counter-clockwise

scale(x,y) Increases or decreases the size of the element, based on specified parameters for width (x) and height (y)

scaleX(n) Changes the element's width

scaleY(n) Changes the element's height

matrix(n,n,n,n,n,n) Combines all of the 2D transform methods into one

Takes six parameters, containing mathematic functions, which enable the element to rotate, scale, move (translate) and skew

translate(x,y) Moves the element from its current position, based on the specified parameters for the left (x) and top (y) position

translateX(n) Moves the element along the X-axis (horizontally)

translateY(n) Moves the element along the Y-axis (vertically)

skew(x-angle,y-angle) Turns or skews the element to a specified angle, based on the specified parameters for the horizontal (x) and vertical (y) lines

skewX(angle) Turns or skews the element to a specified angle along its X-axis

skewY(angle) Turns or skews the element to a specified angle along its Y-axis

3D transformations CSS3 3D transformations allow you to format your elements in CSS3 using three-dimensional effects. Commonly used 3D transform methods are rotateX() and rotateY(), which you will use in this lesson's lab.

To use 3D transform methods, you need to understand the Z-axis. You are probably already familiar with the Cartesian coordinate system's use of the X-axis (horizontal) and Y-axis (vertical) to place points in a space. The Z-axis is used for giving coordinates in three-dimensional space and creating a plane (the Z plane) to help orient a 3D object.

Table 4-3 describes the 3D transform methods.

The 3D transform methods are supported by IE10+ and Firefox. At the time of this writing, Chrome 34 and Safari 7 required the prefix -webkit-. Opera only supports 2D transforms at the time of this writing.

Table 4-3: CSS3 3D transform methods


rotateX(angle) Rotates the element around its X-axis at the specified degree

rotateY(angle) Rotates the element around its Y-axis at the specified degree

rotateZ(angle) Rotates the element around its Z-axis at the specified degree

Z-axis An axis used along with X and Y for specifying Cartesian coordinates in three dimensions, whereas only the X-axis and Y-axis are used for two-dimensional coordinates.

NOTE: Notice that the rotate3d(x,y,z,angle) function allows the X-axis, Y-axis, Z-axis and angle values to be listed all in one declaration.



Table 4-3: CSS3 3D transform methods (cont'd)


rotate3d(x,y,z,angle) Defines a 3D rotation by specifying the degree for rotation for all axes

scale3d(x,y,z) Defines a 3D scale transformation

Increases or decreases the size of the element, based on specified parameters for width (x), height (y) and depth (z)

scaleX(x) Defines a 3D scale transformation by specifying a value for the X-axis

scaleY(y) Defines a 3D scale transformation by specifying a value for the Y-axis

scaleZ(z) Defines a 3D scale transformation by specifying a value for the Z-axis

translate3d(x,y,z) Defines a 3D translation

Moves the element from its current position

Uses specified parameters for positions on the X-axis, Y-axis and Z-axis

translateX(x) Defines a 3D translation

Uses only the value for the X-axis

translateY(y) Defines a 3D translation

Uses only the value for the Y-axis

translateZ(z) Defines a 3D translation

Uses only the value for the Z-axis

matrix3d (n,n,n,n,n,n,n,n,n,n,n, n,n,n,n,n)

Defines a 3D transformation

Uses a 4x4 matrix of 16 values

perspective(n) Defines a perspective view for a 3D transformed element

Affects the distance between the Z-plane and the user

Smaller values bring the viewer closer from the Z-plane

Larger values produce a more subtle effect

In the following lab, you will use CSS3 methods to create 2D and 3D transformations. Suppose your supervisor wants to add some visual interest to your company Web site without introducing programming or applications such as Flash. You suggest adding some CSS3 2D and 3D transform methods, so she assigns you to create some demonstrations on a prototype version of the site. You sit down at your workstation and start to experiment.

Lab 4-1: Creating 2D and 3D transformations with CSS3

In this lab, you will use CSS3 transform methods to create 2D and 3D transformations with an image.

1. Windows Explorer: Copy the Lesson04 folder from your student lab files to your Desktop.

2. Editor: Open Lab_4-1\css\habitat.css in your student lab files.

3. To add a 2D transformation, add the following code shown in bold: .navlinks { display: block;

OBJECTIVE 4.1: CSS3 2D and 3D transformations



border: 2px solid #a1a1a1; padding: 2px 5px; background: #add8e6; border-radius: 5px; text-decoration: none; box-shadow: 5px 5px 5px #888888; } #img-rotate { -ms-transform: rotate(345deg); /* IE9 */ -webkit-transform: rotate(345deg); /* Chrome and Safari */ transform: rotate(345deg); } #video-rotate { -ms-transform: rotate(15deg); /* IE9 */ -webkit-transform: rotate(15deg); /* Chrome and Safari */ transform: rotate(15deg); }

4. Save the Lab_4-1\css\habitat.css file.

5. Editor: Open Lab_4-1\index.htm in your student lab files. Enter the following CSS references shown in bold: <article> <h1>Our Mission</h1> <img class="floatright" id="img-rotate" src="media/menu_icon_default.jpg" height="114" alt="Silhouettes of Habitat for Humanity workers"/> … </article> <article> <h1>Why We Build</h1> <video class="floatright" id="video-rotate" height="150" controls="controls"> <source src="media/habitat_video_Web_720.mp4" type="video/mp4" /> Your browser does not support the HTML5 video element. </video> …

6. Save the Lab_4-1\index.htm file.

7. Browser: Open Lab_4-1\index.htm in your student lab files. Your screen should resemble Figure 4-1.

NOTE: A weakness of the 2D and 3D transformation is the introduction of pixelation into images or videos. If it occurs, the pixels on the outside edge of the images or videos will appear pixelated during rotation. Higher resolution content can help, but you may need to select different values or a different piece of content to fix it. Notice that this Habitat For Humanity video has slight pixelation when rotated.



Figure 4-1: Adding 2D transforms


9. To add a 3D transformation, add the following code shown in bold: #img-rotate { -ms-transform: rotate(345deg); /* IE9 */ -webkit-transform: rotate(345deg); /* Chrome and Safari */ transform: rotate(345deg); } #logo-rotate { -webkit-transform: rotateY(180deg); /* Chrome and Safari */ transform: rotateY(180deg); } #video-rotate { -ms-transform: rotate(15deg); /* IE9 */ -webkit-transform: rotate(15deg); /* Chrome and Safari */ transform: rotate(15deg); }

10. Save the Lab_4-1\css\habitat.css file.

11. Editor: Open Lab_4-1\index.htm in your student lab files. Enter the following CSS references shown in bold: <header> <img id="logo-rotate" src="media/logo.png" alt="Habitat for Humanity logo" /> …

12. Save the Lab_4-1\index.htm file.

13. Browser: Refresh Lab_4-1\index.htm in your student lab files. Your Habitat For Humanity logo should resemble Figure 4-2.

NOTE: If time permits, try experimenting with other properties and values.



Figure 4-2: Image rotated using CSS3 transform

14. Close your browser and text editor.

In this lab, you added 2D and 3D transformations to an image using CSS3. The rotate method performs each transformation differently. In the 3D transform, it defines a 3D rotation along the Y-axis. In the 2D transform, it defines a 2D rotation where the angle is specified in the parameter.

CSS3 Transitions CSS3 transitions are effects that change an element from one style to another style. Transitions are usually triggered when an element, such as an image or text box, is selected or hovered over by the end user. When the user removes the cursor from the element, the element changes back to its original style.

You must identify the CSS property to add the transition, then define the duration of the effect. If you do not specify a duration, then no transition will occur.

The transition property is supported by all major browsers.

Transitions support multiple styles by separating properties by commas. Table 4-4 describes the CSS3 transition properties.

Table 4-4: CSS3 transition properties

Transition Property Description

transition Sets the four transition properties into a single property

transition-property Specifies the CSS property that the transition will affect

transition-duration Defines the amount of time that a transition takes

Default is 0

If no value is specified, then no transition occurs

Values can be specified in either seconds (s) or milliseconds (ms)

OBJECTIVE 4.2: CSS3 transitions and animations

transition CSS3 effect that gradually changes an element from one style to another style.

NOTE: A CSS3 transition and a CSS3 animation often appear the same in a Web browser, but they are different. A transition is usually triggered by a user action, whereas an animation usually starts automatically when a page loads.



Table 4-4: CSS3 transition properties (cont'd)

Transition Property Description

transition-timing-function Describes the speed of a transition

Default is "ease" (slow start)

Parameters include: -linear -ease -ease-in -ease-out -ease-in-out

transition-delay Defines when the transition will begin

Default is 0


In the following lab, you will use CSS3 transition properties to create transition effects on a Web page, Suppose your supervisor liked the effects you produced on the prototype site with CSS3 transformations, and asks what other effects you can produce. You suggest some CSS3 transitions, and you implement a few on the prototype to demonstrate them to her.

Lab 4-2: Using CSS3 transitions

In this lab, you will create transitions using various CSS3 properties and values.

1. Editor: Open Lab_4-2\Lab_4-2.htm in your student lab files.

2. To add a transition, add the following inline CSS code shown in bold: … <style> h2~p { font-style: italic; } p { width: 150px; height: 100px; background: #add8e6; transition: width 3s, transform 3s; } p:hover { width: 250px; } </style> …

3. Save Lab_4-2\Lab_4-2.htm.

4. Browser: Open Lab_4-2\Lab_4-2.htm in your student lab files.

5. Hover your cursor over the first blue text box. Your screen should resemble Figure 4-3.




Figure 4-3: Adding a transition

6. Move your cursor outside the text box. The text box should shrink to its original width. Next, place your cursor over the second blue textbox, then remove it.

7. Editor: Open Lab_4-2\Lab_4-2.htm. Enter the following CSS references shown in bold: … <style> h2~p { font-style: italic; } p { width: 150px; height: 100px; background: #add8e6; transition: width 3s, height 3s, transform 3s; } p:hover { width: 250px; height: 200px; transform: rotate(360deg); } </style> …

8. Save Lab_4-2\Lab_4-2.htm.

9. Browser: Refresh Lab_4-2\Lab_4-2.htm.

10. Hover your cursor over the first text box. The text box will rotate 360 degrees. During the revolution, your screen should resemble Figure 4-4.

NOTE: Try changing the text in the Lab_4-2.htm file to some text related to transitions, such as Transition 1 and Transition 2 instead of Heading 1 and Heading 2.

NOTE: If time permits, try adding your own transition to the Heading 2 paragraph text box.



Figure 4-4: Adding a rotating transition

11. Browser and Editor: Close Lab_4-2\Lab_4-2.htm.

In this lab, you added a transition using CSS.

CSS3 Animations CSS3 animations were designed to replace basic animations that previously required plug-ins, such as Adobe Flash and Apple QuickTime. CSS3 animations also replace basic animations that previously required JavaScript.

CSS3 @keyframes rule The @keyframes rule is an at-rule required to create CSS3 animations. Once you create the @keyframes rule, you can specify CSS styles inside it. Animation is created by gradually changing from one set of styles to another.

The animation property and @keyframes rule are supported by IE10+, Opera and Firefox. At the time of this writing, the –webkit- prefix is required for Safari 7 and Chrome 34.

The @keyframes rule defines an animation and its position. You specify other properties of the animation (including its name and duration) with the animation property, which provides a shorthand for all the animation properties listed in the table below.


@keyframes A CSS3 at-rule that defines an animation and its position.



Position is defined as a percentage or by using the keywords "to" and "from". Similar to transitions, you can define as many styles as you like, provided the first style starts at 0% (or to) and the last style ends with 100% (or from). Study the following example code:

@keyframes logoanimation { 0% {left: 0px; top: 0px;} 50% {left: 200px; top: 0px;} 100% {left: 0px; top:0 px;} }

In this example, the @keyframes name is logoanimation. The element identified will move across the screen to the three locations identified:

• It will start at the 0% (or beginning of the animation) location, which is left: 0px; top: 0px.

• At 50% of the way through the animation's duration, the element will be at left: 200px; top: 0px.

• It will end at the 100% (end of animation) location of left: 0px; top: 0px.

Table 4-5 describes the @keyframes rule and CSS3 animation properties.

Table 4-5: CSS3 @keyframes and animation properties

Property Description

@keyframes Defines the animation

animation Shorthand property for all the animation properties, except animation-play-state

animation-name Specifies the identifier for the @keyframes animation that binds it to a selector

animation-duration Specifies how long the animation will take to complete one cycle

Default is 0

If no value is specified, then no transition occurs


animation-timing-function

Specifies how an animation progresses over one cycle

Default is "ease" (slow start)

Parameters include: -linear -ease -ease-in -ease-out -ease-in-out

animation-delay Specifies when the animation will begin

Default is 0


animation-iteration-count

Specifies the number of times that the animation will play

Default is 1

NOTE: You can change as many styles as you want using percentages, as many times as you want. You should ensure that you use best practices by starting at 0% and ending at 100%.



Table 4-5: CSS3 @keyframes and animation properties (cont'd)


animation-direction Specifies whether to play the animation in reverse on alternate cycles

Requires an iteration count of at least 2

Default is "normal"

Parameters include: -normal -reverse -alternate -alternate-reverse

animation-play-state Specifies whether the animation is running or paused

Default is "running"

In the following lab, you will create an animation using the CSS3 properties and values. Suppose your supervisor has been impressed with the various effects you have demonstrated so far on the prototype site. She asks if you can do any animation with CSS3, so you set out to prepare another demonstration.

Lab 4-3: Creating CSS3 animations

In this lab, you will create an animation using various CSS3 properties and values.

1. Editor: Open Lab_4-3\index.htm in your student lab files.

2. Add a CSS reference for animation to the Web page by entering the following HTML code shown in bold (code shown in strikethrough should be deleted): … <body> <header> <img id="logo-rotate" id="animation" src="media/logo.png" alt="Habitat for Humanity logo" /> …

3. Save Lab_4-3\index.htm


5. Enter the CSS3 @keyframes rule code: … @font-face { font-family: oregonfont; src: url("../media/oregon book.ttf"); } @keyframes logoanimation { 0% {left: 0px; top: 0px;} 50% {left: 200px; top: 0px;} 100% {left: 0px; top: 0px;} } article { padding: 10px; } …




6. Enter the animation properties: … .navlinks { display: block; border: 2px solid #a1a1a1; padding: 2px 5px; background: #add8e6; border-radius: 5px; text-decoration: none; box-shadow: 5px 5px 5px #888888; } #animation { position:relative; /* Chrome and Safari: */ -webkit-animation-name: logoanimation; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: logoanimation; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } #img-rotate { -ms-transform: rotate(345deg); /* IE9 */ -webkit-transform: rotate(345deg); /* Chrome and Safari */ transform: rotate(345deg); } …

7. Save Lab_4-3\css\habitat.css.

8. Browser: Open Lab_4-3\index.htm. The Habitat For Humanity logo should move back and forth in the header. Your screen should resemble Figure 4-5.

Figure 4-5: Adding an animation


In this lab, you added an animation using CSS3.


NOTE: You can practice animation techniques in Optional Lab 4-1: Using CSS3 to animate a text box.



CSS3 User Interfaces CSS3 also offers new user interface (UI) properties. A user interface is the interaction between a Web page and the person using it. A UI generally accepts commands from the user and returns information, but not always. User interface properties allow the user to effectively control and operate the Web page.

For example, the CSS3 resize property allows users to resize elements, such as the <div> element. The resize property uses four values:

• both — The height and the width can be resized.

• horizontal — Only the width can be resized.

• vertical — Only the height can be resized.

• none — No resizing is allowed.

The resize property is not currently supported in IE and Opera, but it works in Chrome, Safari and Firefox.

Table 4-6 describes other CSS3 user interface properties.

Table 4-6: CSS3 user interface properties


appearance Makes an element look like a standard user interface element, such as a button or window

box-sizing Forces specified elements fit an area in a certain way

Parameters include: -content-box -border-box -inherit

icon Styles an element with an iconic equivalent

nav-down Specifies where the cursor will navigate to when the user presses the arrow-down key

nav-index Specifies the tabbing order for an element

nav-left Specifies where the cursor will navigate to when the user presses the arrow-left key

nav-right Specifies where the cursor will navigate to when the user presses the arrow-right key

nav-up Specifies where the cursor will navigate to when the user presses the arrow-up key

outline-offset Draws an outline beyond the border edge (i.e., offsets the outline) as specified

resize Specifies whether an element can be resized by the user and how it can be resized

In the following lab, you will use the CSS3 resize property to modify a user interface. Suppose your supervisor asks you to evaluate the interactive user features on your company Web site. She asks how you might add more interactivity that can also be useful. You decide to implement the CSS3 resize property on the prototype site to show her how it can both provide visual interest and offer users some control over their viewing experience.

OBJECTIVE 4.3 CSS3 user interface

NOTE: Why do you think the resize value of none, which prevents users from resizing the specified element, is needed? When do you think it would actually be used?

user interface The interaction between a Web page and the person using it. Generally, but not always, accepts user commands and returns information.



Lab 4-4: Using the CSS3 resize property

In this lab, you will use the new user interface resize feature provided by CSS3.


2. Enter the resize properties as shown in bold: … section { background: url(globe.png); background-repeat: no-repeat; background-size: contain; resize: both; overflow: auto; } …


4. Browser: Open Lab_4-4\index.htm. Your screen should resemble Figure 4-6. Grab the handle in the lower-right corner of the section element and resize it.

Figure 4-6: Adding a resize property


In this lab, you added the resize feature using CSS3.


Exercise 4-2: Advanced CSS3 Techniques

OBJECTIVE 4.3 CSS3 user interface


®



Creating Menus and Buttons with CSS3 Menus and buttons are some of the user interface elements you can include in a Web page. Although CSS3 does not introduce any new properties specifically for creating menus and buttons, you can use some of the CSS3 properties and techniques you have been studying to develop these advanced and very useful tools in your Web pages.

In the previous lesson, you learned that you can create buttons using CSS3 to style borders with rounded corners around hyperlinked text.

CSS3 also allows you to create rounded navigation menus without JavaScript or images. Users can touch or scroll over menu bar buttons to display a list of choices to select. The end result is an attractive interface that simplifies user navigation.

You can create menus on your Web pages using CSS3 properties such as border-radius, box-shadow and hover.

CSS menu properties work with all major browsers.

Overlays Most CSS menus are usually overlays placed on top of other Web page elements. To create an overlay, use the Z-index property to specify the stack order of an element. This defines which element is placed in front of another by using positive or negative values. Study the example code:

.sub-menu { z-index: 1; display: none; width: 150px; padding: 5px 5px; border-radius: 5px; box-shadow: 5px 5px 5px #888888; }

A positive Z-index value usually places the element in front of another element, whereas a negative Z-index value usually places the element behind another element. You can also create a stack order by assigning each element a value that corresponds to its position in a stack.

If you do not assign a stack order to overlay elements, then by default:

• The element listed last in the HTML code appears on top.

• The element listed first in the HTML code appears on the bottom.

Transparency When you overlap images or other elements, it sometimes makes sense to make the foreground element partially transparent so elements closer to the bottom will be visible. If this is the case, you can use the CSS3 opacity property. As you learned in the previous lesson, CSS3 uses the opacity property or RGBA to create transparency.

The opacity property can be applied to various HTML elements, such as structure tags, menus and images. You specify a value between 0.0 and 1.0 to determine how transparent the element appears: the lower the value, the more transparent the element.

OBJECTIVE 4.4: CSS3 menus and buttons 4.5: CSS3 transparencies and overlays

overlay A CSS3 technique used to place an HTML element on top of another HTML element.

NOTE: By default, elements positioned first in the HTML code are layered on the bottom. Elements positioned last are layered on top. The Z-index property overrides these default settings.

RGBA Specifies the RGB colors of an element, with an additional value for alpha defining the opacity; for example, background: rgba(215, 143, 112, 0.4).



To create a transparency with CSS3, use the following code:

img { opacity: 0.6; }

In the following lab, you will create a CSS3 menu with overlapping elements and buttons. Suppose your supervisor wants your team to add some interesting menus that will not require programming or new applications. You tell her that CSS3 can do this too. She sends you off to create another demo for the prototype and tells your team members that you will be training them in CSS3 starting immediately.

Lab 4-5: Creating a CSS menu

In this lab, you will create a CSS menu that includes buttons and overlapping elements.


2. Remove the resize and overflow properties as shown in bold strikethrough: … section { background: url(globe.png); background-repeat: no-repeat; background-size: contain; resize: both; overflow: auto; } …

3. Enter the drop-down menu properties as shown in bold: … animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } #drop-menu { width: 150px; cursor: pointer; display: block; border: 2px solid #a1a1a1; padding: 5px; height: 20px; max-height: 20px; background: #add8e6; border-radius: 5px; box-shadow: 5px 5px 5px #888888; font-family: oregonfont; font-weight: bold; font-size: 85%; color: #0000A0; } …

4. Add the hover properties immediately after them, as shown in bold: #drop-menu:hover { border: 3px solid #bababa; } #drop-menu:hover .sub-menu {

NOTE: You can review terms and techniques you have studied in this lesson in Activity 4-1: Reviewing advanced CSS3 terms.

OBJECTIVE 4.4: CSS3 menus and buttons 4.5: CSS3 transparencies and overlays

NOTE: Step 3 may take a long time for you to type this large number of properties. If it proves too lengthy, you can copy and paste the properties from the Lesson04\Finished\ Lab_4-5 folder. Repeat this process as needed for other lengthy steps.



display: inline-block; } …

5. Next, add the sub-menu, as shown in bold. It is nested in the drop-down menu. … #video-rotate { -ms-transform: rotate(15deg); /* IE9 */ -webkit-transform: rotate(15deg); /* Chrome and Safari */ transform: rotate(15deg); } .sub-menu { display: none; width: 150px; padding: 5px 5px; border-radius: 5px; -webkit-box-shadow: 5px 5px 5px rgba(0,0,0, 0.2); -moz-box-shadow: 5px 5px 5px rgba(0,0,0, 0.2); box-shadow: 5px 5px 5px #888888; box-shadow: 5px 5px 5px rgba(0,0,0, 0.2); }

6. Add the sub-menu list and hover properties immediately after, as shown in bold. .sub-menu li { list-style-type: none; display: block; border: 2px solid #add8e6; padding: 2px 5px; background: #d8d8d8; border-radius: 5px; } .sub-menu li:hover { border: 3px solid #bababa; }

7. To ensure the drop-down menu list overlaps on top of the image below it, send the image to the back as shown in bold. … #img-rotate { z-index: -1; -ms-transform: rotate(345deg); /* IE9 */ -webkit-transform: rotate(345deg); /* Chrome and Safari */ transform: rotate(345deg); } …


9. Editor: Open Lab_4-5\index.htm in your student lab files.

10. Add the menu items for the drop-down menu by entering the following code shown in bold: <header> <img id="animation" src="media/logo.png" alt="Habitat for Humanity logo" /> <div class="floatright" id="drop-menu"> Choose a search engine <ul class="sub-menu"> <li><a href="http://www.bing.com">Bing</a></li> <li><a href="http://www.google.com"> Google</a></li> <li><a href="http://www.yahoo.com">Yahoo!</a></li>



</ul> </div> </header> …

11. Save Lab_4-5\index.htm.

12. Browser: Open Lab_4-5\index.htm. Hover your cursor over the drop-down menu. Your screen should resemble Figure 4-7.

Figure 4-7: Creating a CSS3 user menu


In this lab, you created a menu that includes buttons and overlapping elements using various CSS3 properties.


Exercise 4-3: CSS3 transitions, animations, overlays and transparencies

CIW Online Resources – Course Mastery Visit CIW Online at http://education.Certification-Partners.com/CIW to take the Course Mastery review of this lesson or lesson segment.

Course Mastery Lesson 4


®

®



Case Study Heading Out to the Highway The Highway Safety Research Center built its Web site in 2006 using HTML 4.01 with CSS1 and CSS2 techniques. Users complained that the site was slow, and the Web designers found it difficult to manage.

When CSS3 became a reality, the original Web designer of the HSRC decided to upgrade the site to HTML5 and CSS3.

The upgrade was a success. The original Web designer was able to re-create the original site with CSS3. He found that the site coding was much easier because fewer images and plug-ins were needed.

* * *

Discuss this scenario and consider the following questions:

• Based on your knowledge of CSS3, what other benefits did the HSRC Web designer probably discover?

• The Web designer has replaced nine images with CSS3 equivalents, so users had fewer images to download when they loaded the page. What unexpected benefit might this provide?

• Why might the site pages and updates be easier to manage after the re-design?

• How might video be affected on this new site? Consider that highway safety videos could be reformatted to HTML5-supported video (H.265 and MP4). Does this offer any improved control for displaying videos on the site?



Lesson Summary

Application project CSS3 transitions and animations add movement to Web pages. This movement can make your site more interesting to users, attract more visitors, and encourage more site usage from existing users.

Search the Internet for examples of CSS3 transitions and animations. Consider the following questions:

• Do a lot of sites use CSS3 transitions and animations in their designs?

• List three examples of how sites use CSS3 transitions or animations.

• List three examples where you think that CSS3 transitions and animations would enhance a static site.

Skills review In this lesson, you learned about advanced CSS3 techniques. These techniques are largely used to replace the need for browser plug-ins, while giving users a comparable experience. You learned how to create 2D and 3D transformations, transitions and animations using CSS3. You also learned how to create transparencies, overlays and menus using CSS3 properties such as border-radius, box-shadow and opacity. Lastly, you created a resizable element with the new user interface properties offered with CSS3.

Now that you have completed this lesson, you should be able to:

4.1: Apply 2D and 3D transformations with CSS3.

4.2: Apply transitions and animations with CSS3.

4.3: Create accessible user interfaces with CSS3.

4.4: Create menus and buttons with CSS3.

4.5: Create transparencies and overlays with CSS3.

CIW Practice Exams Visit CIW Online at http://education.Certification-Partners.com/CIW to take the Practice Exams assessment covering the objectives in this lesson.

Objective 4.01 Review





Note that some objectives may be only partially covered in this lesson.

®



Lesson 4 Review 1. Name at least three of the CSS3 methods you can use to create 3D transformations.

2. How are CSS3 transitions usually triggered?

3. What benefit do CSS3 animations offer over other types of animation?

4. What is an overlay, and what is it often used for in CSS3?

5. Which CSS3 property can you use to create transparency?



Documents

4Lesson 4: Using Advanced CSS3 Techniques · 4Lesson 4: Using Advanced CSS3 Techniques Objectives By the end of this lesson, you will be able to: 4.1: Apply 2D and 3D transformations