CSS3 Review CB
What color is #00FF00?
Green
The ________ property specifies a delay for the start of an animation.
animation-delay
Write the css rule to set an image called bg.png as the background for your page. body { _______________________ }
background-image: bg.png;
To align the content of text to the center of a box use this inline rule: <p style="_________=center;">
text-align
The CSS3 _________ property is used to create a shadow around text.
text-shadow
You can also use the text-shadow property to create a plain border around some text. Complete the following code: h1 { color: yellow; text-shadow: ____px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
-1
Complete the following CSS rule that makes the opacity of the image 50%: img {opacity:______;}
.5
If the animation-duration property is not specified, the animation will have no effect, because the default value is __.
0 zero
What is the current version of CSS?
3 Three CSS3
How many colors are used in the following gradient? #grad { background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, yellow, green); /* Standard syntax */ }
3 three
Complete the following code: __________ example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} }
@keyframes
When you specify CSS styles inside the _______ rule, the animation will gradually change from the current style to the new style at certain times.
@keyframes
What does CSS stand for?
Cascading Style Sheets
What is the hex value of the decimal number 255?
FF
What does the value of 5px refer to? h1 { text-shadow: 2px 2px 5px red; }
blur
Complete the following code: #boxshadow { position: relative; __________: 1px 2px 4px rgba(0, 0, 0, .5); padding: 10px; background: white; }
box-shadow
You want to write a CSS rule that puts apply a shadow to the outside of any div tag. Complete the following code: div { width: 300px; height: 100px; padding: 15px; background-color: yellow; __________: 10px 10px 5px grey; }
box-shadow
This animation-timing-function property specifies an animation with with a slow start. #div3 {animation-timing-function: ________;
ease-in
The repeating-radial-________ function is used to repeat radial gradients
gradient()
Complete the following code to link to an external style sheet: <_________ rel="stylesheet" type="text/css" href="mystyle.css">
link
What is the message called that appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.
tooltip
The ___________ effect will start when the specified CSS property (width) changes value.
transition
To create a radial gradient you must also define at least ____ color stops.
two 2
What color is rgba(255, 255, 255, 0)?
white
Which axis does the number 10px refer to? div {box-shadow: 10px 19px grey;}
x x-axis