HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 1 of 10
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit K: Creating Visual Effects and Animation
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
296: Add Generated Content
2
298: Add Visual Form Feedback
3
300: Create a Gradient
4
302: Create a CSS Shape
5
304: Apply Styles Based On Feature Detection
6
306: Apply a Transform
7
308: Create a Transition
8
310: Animate Content
8
End of Unit Material
9
Glossary of Key Terms
10
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 2 of 10
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit K when they can:
• Add generated content
• Add visual form feedback
• Create a gradient
• Create a CSS shape
• Apply styles based on feature
detection
• Apply a transform
• Create a transition
• Animate content
2
2
29
9
96
6
6:
:
:
A
A
Ad
d
dd
d
d
G
G
Ge
e
en
n
ne
e
er
r
ra
a
at
t
te
e
ed
d
d
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
t
LECTURE NOTES
• Explain that the :before and :after pseudo-elements enable you to insert content into a web
page using style rules.
• Introduce the term generated content, which is the content added using the :before and :after
pseudo-elements.
• Point out that pseudo-elements are typically used to add repeating text or icons to all elements in a
class, or to specify the beginning and ending indicators for each page in a web site.
FIGURES: K-1, K-2
TABLE: K-1
BOXES:
1. Quick Tip: Be sure to type a space after the * and before the closing “.
2. Quick Tip: In the box model, generated content is considered part of an element’s content.
CLASSROOM ACTIVITIES
1. Critical Thinking: Consider a situation in which you have written a web page that includes many
paragraphs. You now want to change the display of the web page so that each paragraph ends with an
icon. How can you do this with pseudo-elements, without making any changes to the HTML code?
2. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 3 of 10
a. T/F The content property of the :before and :after pseudo-elements can specify the
b. T/F The :before pseudo-element changes the formatting of the first line of the existing
LAB ACTIVITY
1. Ask students to use pseudo-elements in order to add a copyright message, or any other disclaimer,
to their personal website. Point out that the message must be displayed in a consistent location for
all pages in the website.
2
2
29
9
98
8
8:
:
:
A
A
Ad
d
dd
d
d
V
V
Vi
i
is
s
su
u
ua
a
al
l
l
F
F
Fo
o
or
r
rm
m
m
F
F
Fe
e
ee
e
ed
d
db
b
ba
a
ac
c
ck
k
k
LECTURE NOTES:
• Explain that CSS supports several pseudo-classes specifically for use with forms.
• Point out that you can use pseudo-classes such as :valid and :invalid to style input elements
and other elements in response to user actions.
FIGURES: K-3, K-4, K-5
TABLE: K-2
BOXES:
1. Quick Tip: The :valid and :invalid pseudo-classes are supported by all modern browsers but are
not part of the official CSS specification, so they generate errors when validating CSS code. You can
safely ignore these errors.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 4 of 10
2. Critical Thinking: Look at Table K-2, and suggest at least one situation in which you would use the
pseudo-classes :checked and :required.
LAB ACTIVITY
1. Ask students to use pseudo-classes to add visual form feedback to a form on their personal website.
How many style rules are added to the style sheet?
3
3
30
0
00
0
0:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
G
G
Gr
r
ra
a
ad
d
di
i
ie
e
en
n
nt
t
t
LECTURE NOTES
• Introduce the term gradient, which is a visual effect in which an area starts as a single color on one
edge or corner and transitions gradually to one or more other colors. Refer students to Figure K-6 as
TABLE: K-3
BOXES:
1. Quick Tip: You can use the radial-gradient keyword to create gradients that start at a single
CLASSROOM ACTIVITIES
1. Critical Thinking: Consider a situation in which you want a gradient to be displayed behind the main
container of a web page, but not on the left or right edges of the screen if the screen is wider than the
content. What selector would you use to specify the gradient? Which property would you use?
2. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 5 of 10
LAB ACTIVITY
1. Ask students to add a gradient behind an element on their personal website.
3
3
30
0
02
2
2:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
C
C
CS
S
SS
S
S
S
S
Sh
h
ha
a
ap
p
pe
e
e
LECTURE NOTES
• Introduce the idea that you can use CSS to create shapes. Explain that all web page elements are
represented as rectangles, and that you can use CSS to make a rectangle appear as a different shape.
• Point out that by replacing an image file with a CSS shape, you reduce the size of your web page
and save users time in downloading your content.
• Remind students that the underlying elements remain rectangular, but their physical appearance is
tweaked to appear as other shapes.
• Explain that students can create a rectangle simply by adding visible borders to any element and
specifying height and/or width if necessary.
• Point out that specifying a border radius of 50% on a square (an element with matching height and
width) creates a circle.
• Explain that creating a triangle with CSS relies on specifying borders for individual sides that
overlap each other and result in this visual effect.
TEACHER TIP
The CSS code for a triangle relies on a single thick border on one side of an element, with
transparent borders on the two adjacent sides.
FIGURES: K-9, K-10, K–11
TABLE: K-4
CLASSROOM ACTIVITY
1. Classroom discussion: Have students discuss drawbacks of using CSS shapes. Ask how they would
make the decision whether or not to use one.
3
3
30
0
04
4
4:
:
:
A
A
Ap
p
pp
p
pl
l
ly
y
y
S
S
St
t
ty
y
yl
l
le
e
es
s
s
B
B
Ba
a
as
s
se
e
ed
d
d
o
o
on
n
n
F
F
Fe
e
ea
a
at
t
tu
u
ur
r
re
e
e
D
D
De
e
et
t
te
e
ec
c
ct
t
ti
i
io
o
on
n
n
LECTURE NOTES:
• Explain that for some styles, in order to support graceful degradation, a complete set of alternative
code is required, rather than relying on a neat fallback such as using an rgb value when rgba is not
supported.
• Introduce Modernizr, which is a free tool for enabling alternative code.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 6 of 10
• Introduce the term graceful degradation, which describes a design that uses newer styles in modern
browsers while displaying a usable layout and all page content in older browsers
FIGURES: K-12, K-13, K-14
BOXES:
1. Quick Tip: The class values that Modernizr adds are only available when the page is open and do not
become part of the HTML code for your web page. The Modernizr library tests for supported features
each time the HTML file is opened.
2. Quick Tip: The class values that Modernizr creates for supported features are listed at
modernizr.com/docs. For unsupported features, Modernizr adds no- to the start of the supported
class value.
3. Understanding the difference between browser sniffing and feature detection
Ensuring cross-browser compatibility has been an important task in web development since early in the
web’s existence. For much of that time, web developers tried to identify the brand and version of each
4. Customizing and downloading the Modernizr library
The Modernizr library is available for free download from modernizr.com. The site offers two options
for downloading the library—development and production. If you choose the Development link, you
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 7 of 10
a. T/F Modernizr automatically creates the alternative code required for each browser that
2. Classroom discussion: Have students discuss the advantages and disadvantages of using Modernizr, or
any other tool for testing browser capabilities. Can they think of a situation that the addition of class
names as done by Modernizr would detract from the graceful degradation of a web page?
3
3
30
0
06
6
6:
:
:
A
A
Ap
p
pp
p
pl
l
ly
y
y
a
a
a
T
T
Tr
r
ra
a
an
n
ns
s
sf
f
fo
o
or
r
rm
m
m
LECTURE NOTES:
• Introduce the term transform, which is a change in the appearance of an element in one or more
TEACHER TIP
Commonly used prefixes include -webkit- (Chrome, Safari, Android browser, Opera), -moz-
(Firefox), and -ms- (IE, Edge).
• Explain that when using a property that is implemented with prefixes in one or more browsers,
FIGURES: K-15, K-16
TABLE: K-5
BOXES:
1. Quick Tip: You can apply multiple transforms using a single property by including a space
between
the transform descriptions; for instance, transform: scale(1.2) rotate(30deg);.
2. Quick Tip: When you apply a transform to an element, the element continues to occupy the same
amount of space in the normal flow, so scaling an element up does not affect the size of its parent
element.
3. Working with browser-prefixed properties
Browser-prefixed properties are sometimes used by browser makers for CSS properties whose functions
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 8 of 10
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Classroom discussion: Have students think of situations in which each of the transforms (rotate, scale,
skewX/skewY, and translate) would be useful in a web page layout.
3
3
30
0
08
8
8:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
T
T
Tr
r
ra
a
an
n
ns
s
si
i
it
t
ti
i
io
o
on
n
n
LECTURE NOTES:
• Introduce the term transitions, which are CSS features that gradually apply changes to properties in
response to user actions over a number of seconds.
• Explain that transitions can be used to add simple animations to web pages.
• Point out that transitions are often used in conjunction with transforms, but emphasize that they
FIGURES: K-18, K-19
TABLE: K-6
BOXES:
3. Using transitions and animations effectively
Transitions and animations can be useful in drawing your users’ attention to different parts of your web
pages. However, if you use transitions and animations too much, your pages can seem cluttered, busy, or
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 9 of 10
what the purpose of each is. You may then want to try to replicate some of these features on your own
site and see how these features change the overall feel of your site.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Classroom Discussion: What is an example of a situation in which you would want to use a large
value for transition-delay? a small value? How about a large value for transition–
3
3
31
1
10
0
0:
:
:
A
A
An
n
ni
i
im
m
ma
a
at
t
te
e
e
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
t
LECTURE NOTES:
• Introduce the term keyframe animation, which is a CSS animation created using animation
properties and the @keyframes rule.
FIGURES: K-20, K-21, K-22
BOXES:
1. Quick Tip: The animation properties and the @keyframes rule are not supported in IE9 or in earlier
versions of IE.
2. Quick Tip: The main difference between transitions and CSS keyframe animations is that keyframe
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F Keyframe animations and transitions both enable you to specify the number of times an
b. Within the braces for an @keyframes rule, you specify nested rules using __________ as
2. Classroom discussion: Review the properties listed in Table K-7. Which properties perform similar
functions to those for a transition? Which are unique to keyframe animations?
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit K Page 10 of 10
3. Critical thinking: Could you create an animated movie using one or more keyframe animations?
Describe the structure of the code you would need to create.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Visual Workshop – a practical, self-graded capstone project that requires independent problem
solving.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• browser prefix (306)
• browser sniffing (305)
• feature detection (304)
• generated content (296)
• graceful degradation (304)
• gradient (300)
• keyframe animation (310)
• transform (306)
• transition (308)
Top of Document