Post on 12-Feb-2020
transcript
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
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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)
®
®
4-4 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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
3D Transform Method Description
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.
Lesson 4: Using Advanced CSS3 Techniques 4-5
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
Table 4-3: CSS3 3D transform methods (cont'd)
3D Transform Method Description
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
4-6 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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.
Lesson 4: Using Advanced CSS3 Techniques 4-7
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
Figure 4-1: Adding 2D transforms
8. Editor: Open Lab_4-1\css\habitat.css in your student lab files.
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.
4-8 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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.
Lesson 4: Using Advanced CSS3 Techniques 4-9
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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
Values can be specified in either seconds (s) or milliseconds (ms)
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.
OBJECTIVE 4.2: CSS3 transitions and animations
4-10 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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.
Lesson 4: Using Advanced CSS3 Techniques 4-11
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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.
OBJECTIVE 4.2: CSS3 transitions and animations
@keyframes A CSS3 at-rule that defines an animation and its position.
4-12 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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
Values can be specified in either seconds (s) or milliseconds (ms)
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
Values can be specified in either seconds (s) or milliseconds (ms)
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%.
Lesson 4: Using Advanced CSS3 Techniques 4-13
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
Table 4-5: CSS3 @keyframes and animation properties (cont'd)
Property Description
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
4. Editor: Open Lab_4-3\css\habitat.css in your student lab files.
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; } …
OBJECTIVE 4.2: CSS3 transitions and animations
4-14 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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
9. Close your browser and text editor.
In this lab, you added an animation using CSS3.
NOTE: If time permits, try experimenting with other properties and values.
NOTE: You can practice animation techniques in Optional Lab 4-1: Using CSS3 to animate a text box.
Lesson 4: Using Advanced CSS3 Techniques 4-15
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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
Property Description
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.
4-16 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
Lab 4-4: Using the CSS3 resize property
In this lab, you will use the new user interface resize feature provided by CSS3.
1. Editor: Open Lab_4-4\css\habitat.css in your student lab files.
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; } …
3. Save Lab_4-4\css\habitat.css.
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
5. Close your browser and text editor.
In this lab, you added the resize feature using CSS3.
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-2: Advanced CSS3 Techniques
OBJECTIVE 4.3 CSS3 user interface
NOTE: If time permits, try experimenting with other properties and values.
®
Lesson 4: Using Advanced CSS3 Techniques 4-17
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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).
4-18 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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.
1. Editor: Open Lab_4-5\css\habitat.css in your student lab files.
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.
Lesson 4: Using Advanced CSS3 Techniques 4-19
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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); } …
8. Save Lab_4-5\css\habitat.css.
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>
4-20 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
</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
13. Close your browser and text editor.
In this lab, you created a menu that includes buttons and overlapping elements using various CSS3 properties.
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-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
NOTE: If time permits, try experimenting with other properties and values.
®
®
Lesson 4: Using Advanced CSS3 Techniques 4-21
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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?
4-22 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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
Objective 4.02 Review
Objective 4.03 Review
Objective 4.04 Review
Objective 4.05 Review
Note that some objectives may be only partially covered in this lesson.
®
Lesson 4: Using Advanced CSS3 Techniques 4-23
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0
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?
4-24 Advanced HTML5 and CSS3 Specialist
© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0