Chapter 7

Question 1

What is border-radius property?

Answer 1

The CSS3 border-radius property creates rounded corners with a style sheet that is rendered by the browser. The border-radius property is currently supported by all of the current major browsers and does not require a vendor specific prefix

Question 2

What is the syntax of box-shadow?

Answer 2

h-shadow v-shadow blur spread color;

Question 3

What is the syntax of text-shadow?

Answer 3

h-shadow v-shadow blur color;

Question 4

What are two types of gradients used the most in css3?

Answer 4

Linear and Radial gradient

Question 5

What is linear gradient?

Answer 5

A linear gradient will create a smooth transition between two or more colors in a line up, down, left, right, or diagonally

Question 6

What is radial gradient?

Answer 6

A radial gradient will create a smooth transition between two or more colors in a radius or circle from the center of the element

Question 7

What is transparency?

Answer 7

Transparency is how invisible or see through the element is and is defined through the opacity property.

Question 8

Opacity property?

Answer 8

Default value = 0 = elements are completely opaque.

Value should be between 1 and 0.

.5 = 50 % opaque
.25=25% opaque

Question 9

What is WOFF?

Answer 9

Web Open Font Format.

You can have an ability to use an unlimited number of custom fonts.

It is not a standard yet, it is in the process by W3C.

Question 10

What is transformations?

Answer 10

Transformations are effects that allow an element to move, resize, rotate, or stretch.

Question 11

How many transformations are there?

Answer 11

There are two dimensional (2D) transformations that use the x and y-axis, or can be thought of as width and height. Three dimensional (3D) transformations include a third dimension which is labeled as the z-axis.

Question 12

What is a skew element?

Answer 12

The skew function is used to stretch an element by providing the x-axis angle and y-axis angle in degrees that the element should stretch. The example below will stretch the element by 25 degrees on the x-axis and will stretch by 45 degrees on the y-axis.
Skew Syntax: skew(x-angle, y-angle)
2D-Skew example:
transform: skew(25deg, 45deg);

Question 13

What is keyframes rule used for?

Answer 13

@keyframes Rule Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Question 14

What is animation property syntax?

Answer 14

animation: animationname duration timing-function delay iteration-count direction fill-mode play-state;

Question 15

How is animation done?

Answer 15

0%= beginning of animations 
100%= end of the animation

Question 16

What is SVG filter effects?

Answer 16

SVG filters are applied to SVG elements using the filter attribute and the value should be set to the id of a valid filter element id.

Question 17

What is perspective-origin property?

Answer 17

The perspective-origin property accepts x and y values that indicate the location of the viewer’s eyes.

perspective-origin Property Syntax:
perspective-origin: x-axis y-axis;