IES: CSS-deck 16

Question 1

table-cell

Answer 1

• display style
• allows the text to be centered horizontally and vertically

Question 2

box-shadow

Answer 2

• enhances content box appearance
• add drop-shadow effects
• multiple shadow rules can create a border around the text

Question 3

text-shadow

Answer 3

• enhances text
• similar to the box-shadow
• adds drop-shadow effects
• multiple shadows can be added to the text by specifying a comma-separated list

Question 4

-shadow effects:

Answer 4

• horizontal and vertical offset values must be specified to position the shadow
• positive values: positions to the right and below the item
• negative values: positions to the left and above the item, respectively
• Ex. 20px 10px: 20px to the right and 10px below the item
• a third value specifies how blurred the shadow’s edge will be (the edge blurs ascending with the value)
• a fourth optional value specifies how far the shadow will extend beyond the offset: the spread

Question 5

“inset”

Answer 5

• text-shadow value/keyword
• can be used to create an inner shadow

Question 6

shadow colors

Answer 6

• color specification is not strictly required, but it is recommended
• color specification avoids inconsistencies between web browsers

Question 7

functions to create gradient fills:

Answer 7

• CSS provides four:
  1. linear-gradient ()
  2. repeating-linear-gradient ()
  3. radial-gradient ()
  4. repeating-radial-gradient ()

Question 8

linear-gradient ():

Answer 8

• a gradient fill creation function
• creates the color transition along a linear path blending from one “color stop” point to another
• each color stop may be specified (parentheses) simply as comma-separated color values, or as comma-separated color and position value
• Ex. red, yellow OR red 50%, yellow 100%: defines color stops at the path’s mid-point and end
• must be at least two color stops, but you can specify 2 + color stops

Question 9

linear-gradient () function path:

Answer 9

• default direction is top-to-bottom
• define alternate direction with optional first value= combo of keywords
• linear-gradient () function path keywords/values:
  1. to
  2. top
  3. bottom
  4. left
  5. right

Question 10

linear-gradient () function path (more precise control of direction):

Answer 10

• more precise control of direction With optional first value specified as an angle:
• 0deg = both lines of the angle lying equal with the x-axis
• < 0deg = the base arrow is equal with the x-axis, with the opposite arrow proceeding counterclockwise as the angle increases
• examples:
  1. 45deg = -315deg
  2. 90deg = -270deg
  3. 180deg = -180deg
  4. 359deg = -1deg

Question 11

radial-gradient ():

Answer 11

• gradient fill creation function
• blends from one color stop to another
• path spreads out from a center point
• default: begins at the element center and is circular
• radial-gradient () keywords/values:
  1. ellipse (value specified along with length and position values)
• Center point is specified by an optional first value combination of keywords as well as percentage values for the x-axis and the y-axis
• radial-gradient center point keyword/values:
  1. closest-side
  2. farthest-side
  3. closest-corner
  4. farthest-corner
  5. at
• Ex: closest-side at 60% 60%

Question 12

aspects of the repeating- functions:

Answer 12

• repeating-linear-gradient () ; repeating-radial-gradient () .
• accept the same values as their non-repeating counterparts
• automatically repeat the gradient after the final specified color stop
• with this in mind, you can specify the same color for the first and last color stops in a repeating gradient to avoid abrupt changes

Question 13

define an alternate: gradient color fills

Answer 13

• some browsers may not support gradients
• it’s useful to specify a default single color

Question 14

border-image:

Answer 14

• will only be applied if a border has been specified
• specifies an image source to the CSS url () function for border decoration
• the only required value
• will position the image within a specified border area, at each corner of a content box
• (all browsers that support border-image also support gradients: you can specify any type of gradient to decorate a border)

Question 15

border-image (between the corner decoration):

Answer 15

• can specify additional values after, to decorate between the corners
• slices the image into nine sections like a tic tac toe board
• The first additional value can specify at which points to slice the image from the top right bottom and left edges (this produces the corner figures as well as the designs to fill the areas between the corner figures)
• a second additional value can explicitly specify, using keywords, how the between-the-corner designs are to be fabricated
• border-image between the corner decoration keywords:
  1. stretch
  2. Repeat
  3. round

Question 16

border-image shorthand:

Answer 16

• border-image is shorthand for the individual: border-image-source, border-image-slice, border-image-repeat.
• Additional values can be specified in this shorthand: border-image-width and border-image-outset

Question 17

border-image-source:

Answer 17

• specifies an image source to the CSS url () function for border decoration
• the only required value
• will position the image within a specified border area, at each corner of a content box

Question 18

border-image-slice:

Answer 18

• can specify additional values after, to decorate between the corners
• slices the image into nine sections like a tic tac toe board
• The first additional value can specify at which points to slice the image from the top right bottom and left edges (this produces the corner figures as well as the designs to fill the areas between the corner figures)

Question 19

border-image-repeat:

Answer 19

• a second additional value can explicitly specify, using keywords, how the between-the-corner designs are to be fabricated
• Specifies the border-image between the corner decoration using the “repeat” keyword.

Question 20

border-image-width:

Answer 20

• used to set the width of the border as well as the borderimage
• It can be set by providing multiple values:
  1. If only one value is provided, it is applied to all four sides.
  2. When two values are specified, The first value is applied to ‘the top and bottom’, and The second value is applied to the ‘left and right’.
  3. When three values are specified, The first value is given to the top, the cond is shared by both ‘left and right’, and The third to the bottom
  4. If four values are given then they are applied to the top, right, bottom and left (clockwise) order.