WorksheetsLesson 7: Managing the Graphical Interface by Using CSS
Total questions: 20
Worksheet time: 10mins
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?
border-radius: 30px
border-top-right-radius: 30px
border-right-radius: 30em
border-radius-top-right: 30px
. You want to add a shadow to the inside of a box. Which attribute do you use with the CSS box-shadow property?
h-shadow
v-shadow
spread
inset
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?
h-shadow
v-shadow
spread
inset
. In the following code, what does the value #808080 affect?
box-shadow: 10px 10px 5px #808080;
size of the drop shadow
color of the drop shadow
size of the box
color of the box
To apply a 75% transparency to an image or element, which property do you use?
opacity: 25
opacity: 0.25
transparency: 75
transparency: 0.75
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)
color stops
size and shape of the gradient
horizontal and vertical center values
geometric position
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)
color stops
size and shape of the gradient
horizontal and vertical center values
percent of color for both color stops
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>
@font-face
@font-woff
@media-font
@keyframe-font
. 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)
b)
c)
d)
translate: transform(100px,150px)
transform: translate(150px,100px)
transform: translate(100px,150px)
translate: transform(150px,100px)
In the following code, how does the method scale(3,6) affect the element to which it is applied?
transform: scale(3,6)
moves the element three units from the top and six units from the right
moves the element three units from the left and six units from the bottom
transforms the height to be three times its original size and the width six times its original size
transforms the width to be three times its original size and the height six times its original size
You want to rotate an element 45 degrees. Which code do you use?
transform: rotate(315deg)
transform: rotate(45deg)
rotate: transform(315deg)
rotate: transform(45deg)
A rectangle contains text. You want the text to appear backwards. What code do you use?
transform: rotateX(180deg)
transform: rotateX(180%)
transform: rotateY(180deg)
transform: rotateY(180%)
You want to turn an element 30 degrees around the x-axis in the 2D plane. What code do you use?
transform: skew(30deg)
transform: skew(30deg,30deg)
transform: skewX(30deg)
transform: skewY(30deg)
Which of the following statements is not true of the CSS3 3D perspective property?
The general syntax is perspective: number.
It applies only to 3D transformed elements.
Lower values (1000 or less) create a more pronounced effect than higher values.
The property defines how a browser renders the width of a 3D transformed element.
In a transition, which property allows a transition to change speed over its duration?
transition-property
transition-delay
transition-duration
transition-timing-function
The following code is associated with animations. Which CSS rule replaces the word RULE?
RULE fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@animation
@keyframes
@media-animation
@iframes
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; }
increases the speed of the animation and then slows it down toward the end
decreases the speed of the animation and then speeds it up toward the end
maintains a steady speed throughout the animation
starts the animation at a slow speed and then maintains a steady speed for the duration of the animation
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>
the filter name
the blur effect
that the entire element will be blurred
none of the above
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 grey square with a blue drop shadow
a blue square with a grey drop shadow
a grey square with a blue border
a blue square with a grey border
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>
context.Text
context.fillText
context.fill
context.textFill
