Chapter 5

Exercises

Question 5-1

5.1 Fill in the blanks in the following statements

a) The text-shadow property makes it easy to add a text shadow effect to any text

b) The border-radius property allows you to add rounded corners to any element.

c) CSS3 includes two new ways to express color RGBA and HSLA.

d) The horizontal offset defines the number of pixels that the box-shadow will appear to the left or the right of the box.

e) Radial gradients are similar to linear gradients, but the color changes gradually from an inner circle (the start) to an outer circle (the end).

f) The border-image-slice divides the image into nine regions: four corners, four sides and a middle, which is transparent unless otherwise specified.

g) The animation-timing-function determines how the animation progresses in one cycle of its duration. Possible values include linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier

h) For the element being animated, the @keyframes rule defines the element's properties that will change during the animation, the values to which those properties will change, and when they'll change.

i) Transitions are similar in concept to animations, but they allow you to specify only the starting and ending values of the CSS properties being changed. An animation's keyframes enable you to control intermediate states throughout the animation's duration.

j) CSS3 transformations allow you to move, rotate, scale and skew elements.

k) Rules consist of one or more selectors followed by a declaration block in curly braces ({}).

l) in CSS3, you can use selectors to easily style attributes.

Question 5-2

5.2 State whether each of the following is true or false. If false, explain why.

a) The @font-face rule specifies that an embedded font will be used when the document is rendered on a computer screen. FALSE The @media rule handles this operation

b) You can use gradients in any property that accepts an image. True

c) A horizontal gradient gradually changes from top to bottom. False IT changes from left to right

d) You can add lines between columns using the colum-gap property. False you need to use the column-rule property.

e) The @media rule determines the type and size of device on which the page is rendered. When the browser looks at the rule, the result is either true or false. The rule's styles are applied only in the result is false: False, the rule applies only is the result is true.

f) To add multiple background images to an element, use the background-position to specify where each image is placed using the box model. False the background-origin is used in the box model.

Queston 5-3

5.3 (Text Shadow) Create a text shadow on the phrase " New features in CSS3" with a horizontal offset of 2px, a vertical offset of 5px, a blur radius of 6px and a text-shadow color deepskyblue.

Question 5-4

5.4 (Text Stroke) Create a text stroke on the phrase "New WebKit features". Make the color of
the text LightBlue. Use a 3px Navy text-stroke and set the font-size to 700%.

5.5 (Rounded Corners)

Question 5.6

5.6 (Box Shadow) Create three div elements of varying colors, each with a width and height of 200px.
On the first box, add a dimgrey box-shadow with a horizontal offset of 15px, a vertical offset of 15px and a blur radius of 20px.
On the second box, add a dimgrey box-shadow with a horizontal offset of -15px, a vertical offset of -15px and a blur radius of 30px.
On the third box, add a dimgrey box-shadow with a horizontal offset of 15px, a vertical offset of 15px and a blur radius of 10px.

5.6 (Box Shadow)

Question 5.7

5.7 (Linear Gradient)

Create a div element with a width and height of 500px. Create a diagonal linear gradient using the colors of the rainbow—Red, Orange, Yellow, Green, Blue, Indigo, Violet.

Question 5.8

5.8 (Radial Gradient) Create a div element with a width and height of 500px.
Create a radial gradient with three colors.
Start the gradient in the bottom-left corner with the colors changing as they move along the gradient line to the right.