Deck 11: Creating Visual Effects and Animation

Question 1

The :before and :after pseudo-elements enable you to insert content into web pages using style rules.

Answer 1

True

Question 2

Modernizr tests a browser to detect which properties are supported, a process known as browser detection._________________________

Answer 2

False

Question 3

The :valid pseudo-class applies to form elements with user input that does not meet the rules for the field.

Answer 3

False

Question 4

You can use the :visited pseudo-class to change the properties of input elements and other elements in forms.

Question 5

To create a transition, the shorthand transform property or one or more of the specific properties for transitions is added to the style rule for the default state of the affected element._________________________

Question 6

Modern browsers support gradients as backgrounds.

Question 7

You can create triangles by applying CSS properties to div elements.

Question 8

Within the braces for an @keyframes rule, you specify nested rules using pixels as selectors._________________________

Question 9

In the box model, generated content is not considered part of an element's content.

Question 10

An animation created using animation properties and the @keyframes rule is known as a keyframe animation._________________________

Question 11

Modern browsers support using the CSS transform property to apply a transform._________________________

Question 12

CSS supports several pseudo-classes specifically for use with forms.

Question 13

Browser suffixes are words or abbreviations that are added to a property name and that are specific to one or more browsers or rendering engines._________________________

Question 14

The animation-duration property specifies the time in seconds from the start of an animation to the end of the animation._________________________

Question 15

You use the :focus pseudo-class to specify styles for a form field when it has the focus.

Question 16

Style rules based on the :before and :after pseudo classes use the display property to specify text or the path and name of a file.

Question 17

You can use the :before pseudo-element to add an image before an element.

Question 18

The translate keyword repositions an element a specified amount from its default position._________________________

Question 19

The scale keyword rotates an element a specified number of degrees._________________________

Question 20

A filter 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._________________________

Question 21

Which of the following is the browser prefix for Microsoft browsers?

A) -ms-
B) -moz-
C) -webkit-
D) -o-

Question 22

Modernizr applies a set of CSS classes to which element?

A) html
B) body
C) script
D) div

Question 23

When specifying content for the :before and :after pseudo-elements, a pair of quotes with not content creates an empty string,which you use to __________.

A) remove any content created in other style rules
B) specify a space as the content
C) specify a single quote as the content
D) specify a pair of quotes as the content

Question 24

You use the __________ pseudo-class to apply styles to elements that are checked or otherwise selected. ​

A) :active
B) :checked
C) :required
D) :valid

Question 25

When you use Modernizr, you can write style rules that apply only to children of elements with specific __________ values.

A) class
B) ID
C) type
D) src

Question 26

Which property is important in creating a circle with CSS?

A) border-radius
B) border
C) color
D) line-height

Question 27

CSS features that gradually apply changes to properties in response to user actions over a number of seconds are known as __________.

A) transforms
B) transitions
C) animations
D) keyframe animations

Question 28

The process of testing a browser to detect which properties are supported is known as __________.

A) feature detection
B) browser sniffing
C) graceful degradation
D) progressive enhancement

Question 29

Whichof the following script libraries is a popular tool for implementing graceful degradation?

A) Modernizr
B) Bootstrap
C) jQuery
D) Angular

Question 30

You specify a gradient as the value of which property?

A) background-image
B) content
C) color
D) background-color

Question 31

When creating a gradient, a color name or value followed by ameasurement is known as a(n) __________.

A) color stop
B) line
C) starting point
D) direction

Question 32

Which keyword do you use to create a basic background gradient?

A) linear-gradient
B) background-gradient
C) basic-gradient
D) gradient

Question 33

Which property is used with the :before and :after pseudo-elements to specify either text or the path and name for an image file to be displayed?

A) content
B) image
C) text
D) element

Question 34

You use the __________ pseudo-class to apply styles to elements that do nothave the required attribute.

A) :focus
B) :checked
C) :optional
D) :valid

Question 35

Unless you specify otherwise, a linear gradient starts at the __________ of an element.

A) top
B) right
C) bottom
D) left

Question 36

The __________ keyword prevents a gradient from repeating.

A) no-repeat
B) stop
C) once
D) one-time

Question 37

Content added using the :before and :after pseudo-elements is known as __________ content.

A) generated
B) gradient
C) degraded
D) detected

Question 38

A design exhibits __________ when it uses newer styles in modern browsers while displaying a usable layout and all page content in older browsers.

A) graceful degradation
B) responsive design
C) absolute positioning
D) transforms

Question 39

A change in the appearance of an element in one or more specific ways, including rotating, scaling, skewing, or moving it, is known as a(n) __________.

A) transform
B) translation
C) animation
D) keyframe animation

Question 40

Which of the following is a pseudo-class that you can use with a form?

A) :focus
B) :visited
C) :target
D) :form

Question 41

If Jerry created his visual effect using a keyframe animation, which property would he use to specify how long the animation takes?

A) animation-delay
B) animation-duration
C) animation-iteration-count
D) animation-timing-function

Question 42

Which property determines the rhythm of a transition?

A) transition-timing-function
B) transition-delay
C) transition-duration
D) transition-property

Question 43

You can add generated content using the :before and __________ pseudo-elements.

Question 44

To create an @keyframes rule, you specify a(n) __________ for the rule after the keyword @keyframes.

A) name
B) class value
C) src value
D) length

Question 45

​
​

Referring to the figure above, what does the code reveal-sun represent?

A) the class value of the element to which the code applies
B) the name of the keyframe animation
C) the text that is animated
D) the title of the animation

Question 46

You can use pseudo-classes to change the properties of input elements and other elements in __________ in response to user actions.

Question 47

An animation created using animationproperties and the @keyframes rule is known as a(n) __________.

A) transform
B) transition
C) keyframe animation
D) JavaScript animation

Question 48

To specify properties for the form field that has the focus, Rosa should use the __________ pseudo-class.

A) :valid
B) :invalid
C) :focus
D) :checked

Question 49

Referring to the figure above, what does the code #edd010 specify?

A) the starting point and direction
B) the starting color
C) an intermediate color
D) the ending color

Question 50

Referring to the figure above, what is the effect of the value scale(1.2)?

A) rotates the element 1.2 degrees
B) resizes the element 1.2 times its original size
C) moves opposite sides in opposite directions to create an angle of 1.2 degrees
D) repositions the element 1.2em from its default position horizontally and vertically

Question 51

To specify properties for a form field with content that meets the rules for the field, Rosa should use the __________ pseudo-class.

A) :valid
B) :invalid
C) :focus
D) :checked

Question 52

Referring to the figure above, when are the declarations applied to the elements selected by the style rule?

A) when the web page is first rendered by the browser
B) when a user moves the mouse pointer over the elements
C) when a user clicks the elements
D) when the elements have valid content

Question 53

Which property specifies the time in seconds from the start of an animation to the end of the animation?

A) animation-duration
B) animation-delay
C) animation-direction
D) animation-iteration-count

Question 54

Referring to the figure above, the property name-ms-transform incorporates a(n) __________.

A) browser prefix
B) class name
C) pseudo-element
D) pseudo-class

Question 55

​
​

Referring to the figure above, what does the code 50% represent?

A) the point in time halfway through the animation
B) the point in time when the animated object has moved halfway across the browser window
C) the point in time when the animated object has moved halfway across the parent element
D) the location halfway down the browser window

Question 56

For elements that should not have generated content, Rosa can use the content property with a value of __________.

A) ""(an empty string)
B) " "(quotes containing a space)
C) " *"
D) none

Question 57

Referring to the figure above, what does the code #d823c5 specify?

A) the starting point and direction
B) the starting color
C) an intermediate color
D) the ending color

Question 58

Jerry could use a keyframe animation to create the effect, or he could use a(n) __________.

A) gradient
B) transition
C) responsive design
D) CSS shape

Question 59

Referring to the figure above, what does the code 45degspecify?

A) the starting point and direction
B) the starting color
C) an intermediate
D) the ending color

Question 60

Which pseudo-class would Jerry use to specify the styles for the new visual effect?

A) :focus
B) :hover
C) :active
D) :checked

Question 61

Name the two parts of the syntax for creating a linear gradient, and describe the role of each part.

Question 62

Matching
Match each pseudo-class with the appropriate description.
a. :active
b. :checked
c. :focus
d. :required
e. :valid
REFERENCES: 299
user entry in the field is required

Question 63

Matching
Match each pseudo-class with the appropriate description.
a. :active
b. :checked
c. :focus
d. :required
e. :valid
REFERENCES: 299
the element is in the process of being clicked or otherwise activated

Question 64

Because the transform property is a relatively new CSS feature, it was implemented in some browsers with browser __________, which are words or abbreviations that are added to the start of a property name.

Question 65

The __________ keyword prevents a gradient from repeating.

Question 66

Because the @-webkit-keyframes rule and the :valid pseudo-class are not part of the CSS specification, they cause __________ errors.

Question 67

__________ animations enable you to control more aspects of an animation than transitions.

Question 68

When you click a form field, it has the focus and the declarations in a style rule using the __________ pseudo-class are applied.

Question 69

You can specify a gradient as a value of the background-image property or use the shorthand __________ property.

Question 70

Matching
Match each pseudo-class with the appropriate description.
a. :active
b. :checked
c. :focus
d. :required
e. :valid
REFERENCES: 299
the element has the focus

Question 71

Explain the difference between transitions and keyframe animations, including at least one advantage of each.

Question 72

Describe how to create a circle using CSS, including 3 properties required to do so and their values.

Question 73

Matching
Match each pseudo-class with the appropriate description.
a. :active
b. :checked
c. :focus
d. :required
e. :valid
REFERENCES: 299
the element is checked or otherwise selected

Question 74

Matching
Match each pseudo-class with the appropriate description.
a. :active
b. :checked
c. :focus
d. :required
e. :valid
REFERENCES: 299
the content entered by a user meets the rules for the field

Question 75

You can create a perfect circle using CSS by specifying a border radius of __________%.