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