Lesson 7: Managing the Graphical Interface by Using CSS

1. You created a box and want only the upper-right corner to be rounded with a radius of 30
pixels. Which of the following can you use to create the effect?
a) border-radius: 30px
b) border-top-right-radius: 30px
c) border-right-radius: 30em
d) border-radius-top-right: 30px

Answer: b
Difficulty: Medium
Section Reference: Creating Rounded Corners
The border-top-right-radius: 30px code will create a rounded upper-right corner with a
radius of 30 pixels.

2. You want to add a shadow to the inside of a box. Which attribute do you use with the CSS
box-shadow property?
a) h-shadow
b) v-shadow
c) spread
d) inset

Answer: d
Difficulty: Easy
Section Reference: Creating Shadows
The box-shadow inset attribute enables you to apply a shadow effect to the inside of a box.

3. You want to add a drop shadow to a box. Which attribute do you use with the CSS box-
shadow property to control the size of the shadow?
a) h-shadow
b) v-shadow
c) spread
d) inset

Answer: d
Difficulty: Easy
Section Reference: Creating Shadows
The box-shadow spread attribute enables you to control the size of a drop shadow.

4. In the following code, what does the value #808080 affect?

box-shadow: 10px 10px 5px #808080;

a) size of the drop shadow

b) color of the drop shadow
c) size of the box
d) color of the box

Answer: b
Difficulty: Hard
Section Reference: Creating Shadows
In the code snipped, the value #808080 affects the color of the drop shadow

5. To apply a 75% transparency to an image or element, which property do you use?

a) opacity: 25
b) opacity: 0.25
c) transparency: 75
d) transparency: 0.75

Answer: b
Difficulty: Medium
Section Reference: Applying Transparency
To apply a 75% transparency, you would use the value 0.25 (1.0 – 0.75) with the opacity
property.

6. In the following code for a linear gradient, what do the numbers in the last set of parentheses
define?
background: linear-gradient(to right, rgba(255,255,255,0)

a) color stops
b) size and shape of the gradient
c) horizontal and vertical center values
d) geometric position

Answer: a
Difficulty: Medium
Section Reference: Applying Background Gradients
The numbers 255,255,255,0 specify multiple color stops.

7. In the following code for a radial gradient, what does the first set of percentages (50% 50%)
define?
radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266)

a) color stops
b) size and shape of the gradient
c) horizontal and vertical center values
d) percent of color for both color stops

Answer: c
Difficulty: Hard
Section Reference: Applying Background Gradients
The general syntax for radial gradients is radial-gradient(position,size and
shape,color stops). position can be expressed as a set of percentages , which defines the
horizontal and vertical center values.

8. The following code is associated with Web Open Font Format (WOFF) fonts. Which CSS rule
replaces the word RULE?
<style>
RULE { font-family: "font-family-name";
src: url("http://website/fonts/fontfile")
}
</style>

a) @font-face
b) @font-woff
c) @media-font
d) @keyframe-font

Answer: a
Difficulty: Easy
Section Reference: Understanding Typography and the Web Open Font Format
To use a WOFF font from a font vendor’s site, include the @font-face rule in the CSS file.

9. You want to move an element 150 pixels from the left and 100 pixels from the top. Which of
the following code snippets is correct?
a) translate: transform(100px,150px)
b) transform: translate(150px,100px)
c) transform: translate(100px,150px)
d) translate: transform(150px,100px)

Answer: b
Difficulty: Medium
Section Reference: 2D Translation
To move an element 150 pixels from the left and 100 pixels from the top, use transform:
translate(150px,100px).

10. In the following code, how does the method scale(3,6) affect the element to which it is
applied?
transform: scale(3,6)

a) moves the element three units from the top and six units from the right
b) moves the element three units from the left and six units from the bottom
c) transforms the height to be three times its original size and the width six times its original size
d) transforms the width to be three times its original size and the height six times its original size

Answer: d
Difficulty: Medium
Section Reference: 2D Scaling
The value scale(3,6) transforms the width to be three times its original size and the height four
times its original size.

11. You want to rotate an element 45 degrees. Which code do you use?
a) transform: rotate(315deg)
b) transform: rotate(45deg)
c) rotate: transform(315deg)
d) rotate: transform(45deg)

Answer: b
Difficulty: Medium
Section Reference: 2D and 3D Rotation
To rotate an element 45 degrees, use transform: rotate(45deg).

12. A rectangle contains text. You want the text to appear backwards. What code do you use?
a) transform: rotateX(180deg)
b) transform: rotateX(180%)
c) transform: rotateY(180deg)
d) transform: rotateY(180%)

Answer: c
Difficulty: Hard
Section Reference: 2D and 3D Rotation
Use the rotateY(180deg) method with the transform property to display text that appears
backwards.

13. You want to turn an element 30 degrees around the x-axis in the 2D plane. What code do you
use?
a) transform: skew(30deg)
b) transform: skew(30deg,30deg)
c) transform: skewX(30deg)
d) transform: skewY(30deg)

Answer: a
Difficulty: Hard
Section Reference: 2D and 3D Skewing
Use the skew(30deg) method with the transform property to turn an element 30 degrees around
the x-axis in the 2D plane.

14. Which of the following statements is not true of the CSS3 3D perspective property?
a) The general syntax is perspective: number.
b) It applies only to 3D transformed elements.
c) Lower values (1000 or less) create a more pronounced effect than higher values.
d) The property defines how a browser renders the width of a 3D transformed element.

Answer: d
Difficulty: Medium
Section Reference: Understanding 3D Perspective, Transitions, and Animations
The CSS3 3D perspective property defines how a browser renders the depth of a 3D
transformed element.

15. In a transition, which property allows a transition to change speed over its duration?
a) transition-property
b) transition-delay
c) transition-duration
d) transition-timing-function

Answer: d
Difficulty: Easy
Section Reference: Understanding 3D Perspective, Transitions, and Animations
The transition-timing-function property allows a transition to change speed over its
duration.

16. The following code is associated with animations. Which CSS rule replaces the word RULE?
RULE fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
a) @animation
b) @keyframes
c) @media-animation
d) @iframes

Answer: b
Difficulty: Easy
Section Reference: Understanding 3D Perspective, Transitions, and Animations
Animations use keyframes, a construct that enables you to change values anywhere within the
animation.

17. In the following code, what effect does the ease value have on the animation?
div { animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: ease; }
div:hover { animation-name: fadeout; }

a) increases the speed of the animation and then slows it down toward the end
b) decreases the speed of the animation and then speeds it up toward the end
c) maintains a steady speed throughout the animation
d) starts the animation at a slow speed and then maintains a steady speed for the duration of the
animation

Answer: a
Difficulty: Medium
Section Reference: Understanding 3D Perspective, Transitions, and Animations
The value ease increases the speed of the animation and then slows it down toward the end.

18. In the following code for an SVG filter, what does in="SourceGraphic" indicate?
<svg>
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="150" height="150" stroke="plum" stroke-width="3"
fill="plum" filter="url(#a1)" />
</svg>

a) the filter name

b) the blur effect
c) that the entire element will be blurred
d) none of the above

Answer: c
Difficulty: Hard
Section Reference: Applying SVG Filter Effects
in="SourceGraphic" indicates the entire element will be blurred.

19. What is the result of the following SVG produce?

<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey" filter="url(#i1)" />
<rect width="150" height="150" fill="blue" />
</svg>

a) a grey square with a blue drop shadow

b) a blue square with a grey drop shadow
c) a grey square with a blue border
d) a blue square with a grey border

Answer: b
Difficulty: Hard
Section Reference: Applying SVG Filter Effects
The code produces a blue square with a grey drop shadow.

20. The following JavaScript code creates a canvas object with text. What method do you use in
place of the word METHOD?
<script type="text/javascript">
var canvas = document.getElementById("myText");
context = canvas.getContext("2d");
context.font = "30px Arial";
METHOD("Canvas-generated text", 40, 120);
</script>

a) context.Text
b) context.fillText
c) context.fill
d) context.textFill

Answer: b
Difficulty: Medium
Section Reference: Using Canvas to Enhance the GUI
The fillText method creates solid-filled text (black by default).
.