IES: CSS-deck 17

Question 1

border-image-outset

Answer 1

• one of the optional additional properties of border-image
• specifies how far the image can extend outside the border area

Question 2

transform

Answer 2

• CSS property that dynamically manipulates content boxes
• changes their size, position, or orientation
• specifies a transformation function:
  1. scale(n1, n2) (can be specified to one value: applied to both x- and y-axes
  2. scaleX(n)
  3. scaleY(n)
  4. skew(n1, n2)
  5. skewX(n)
  6. skewY(n)
  7. rotate(n)
  8. rotateX(n)
  9. rotateY(n)
  10. rotateZ(n)
  11. translate(n1, n2)
  12. translateX(n)
  13. translateY(n)
  14. matrix(n, n, n, n, n, n)
• Transformations can be specified to an element’s :hover

Question 3

transform-origin

Answer 3

• the point around which a transformation is performed
• (default): the center of the element
• An alternative can be specified by:
  1. units
  2. percentages
• 3. keywords:
     
     1. top
     2. bottom
     3. left
     4. right
     5. center
     6. Ex. transform-origin: top-right; (element pivots around its top-right corner)
• transform-origin can only be used in conjunction with transform

Question 4

transition:

Answer 4

• a CSS property
• can dynamically modify property values of color, size, position, orientation, etc. over a specified period of time
• creates simple animated effects
• must specify property to be modified, and effect duration
• multiple properties specified as a comma-separated list of property and duration pairs

Question 5

transition duration:

Answer 5

• transition duration default 0s
• a transition will not run unless you specify a duration

Question 6

transition-timing-function:

Answer 6

• can control the “acceleration curve” of the effect
• controls by assigning one of the functions:
  1. linear : consistent speed from start to end
  2. ease : increases from start to reach full speed then decreases at end (default)
  3. ease-in : increases at start only
  4. ease-out : decreases at end only
  5. ease-in-out : increases at start and decreases at end
  6. steps(n) : jump to n number of intervals
  7. cubic-bezier(x1, y1, x2, y2) : elastic or bounce between coordinates

Question 7

transition-delay:

Answer 7

• specifies a time value
• So the effect will not begin immediately

Question 8

transition shorthand:

Answer 8

• shorthand for individual properties:
  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay
• values for all four may be specified in this order
• Ex. transition: width 5s linear 0.5s;

Question 9

steps():

Answer 9

• transition? function
• jumps to pauses in the transition
• so, steps(5): pauses each second in a 5 second effect

Question 10

transition shorthand :hover

Answer 10

• the final shorthand value can be specified to an element’s :hover, so transformation will occur there with that event
• element resumes original values with event end: automatically running transition effect in reverse

Question 11

animation:

Answer 11

• (transitions and animations can combine to great effect)
• CSS property
• nominates “keyframes” to determine property values at particular points
• can specify (in this order):
  1. animation name (defined by @keyframes rule)
  2. duration (specified as with transitions)
  3. timing function (controls acceleration curve, same as those for transitions-such as “ease-in-out”)
  4. delay (specified as with transitions)
  5. iteration count (may be an integer or the keyword “infinite”)
  6. direction (can be specified as “normal” (default), “reverse”, or “alternate” (alternating between playing forward and reverse on successive iterations))

Question 12

@keyframes :

Answer 12

• an animation CSS rule
• defines an animation name and selects points using percentages or from and to keywords
• Ex. @keyframes bounce {
  from {top: 100px;}
  50% {top: 150px;}
  to {top: 300px;}
  }
• Keyframes determine the styles one or more properties will have at various points during an animation

Question 13

animation shorthand:

Answer 13

• animation is shorthand for individual properties:
  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
• can specify in a space-separated list (in this order):
  1. animation name
  2. duration
  3. timing function
  4. delay
  5. iteration count
  6. direction
• Ex. animation: bounce 5s linear 1s infinite alternate;
• (no animation delay required, so its value is omitted, and the browser uses its zero default delay value)

Question 14

uu

animation-fill-mode:

Answer 14

• CSS animation property
• for animations that run for a set number of iterations
• potential specified values:
  1. “forwards”: retains the values of the final keyframe
  2. “backwards”: will get the style values of the first keyframe
  3. “both”: retains the final keyframe values and will get the first keyframe style values

Question 15

Centering image and videos:

Answer 15

• centering within a container
  1. > make the element into a block
  2. > set the left and right margins to “auto”

Question 16

object-fit:

Answer 16

• specifies how the image or video fits into the <img></img> or <video></video>
• Determines how the content is to be treated in order to fit the element:
  1. “fill”: content is stretched or squeezed to fill the element’s content box (the default)
  2. “contain”: content is scaled up or down to maintain its aspect ratio and fit inside the element’s content box
  3. “cover”: content is scaled to maintain its aspect ratio and fill the element’s content box, so may be clipped
  4. “scale-down”: content is scaled down to maintain its aspect ratio in smaller content boxes
  5. “none”: content is not resized, so may be clipped

Question 17

“TCP”:

Answer 17

• in the context of websites, stands for “Transmission Control Protocol”
• Standard protocol that ensures reliable data transmission between devices on a network
• Guarantees that information sent over the internet arrives correctly and in the correct order
• Essentially acts as the foundation for communication between web servers and clients
• The internet is a Transmission Control Protocol

Question 18

“FTP”:

Answer 18

• in the context of websites, stands for “File Transfer Protocol”
• A standard network protocol used to transfer files between computers over a network, like the internet (web developers/designers use this to upload new website files images, and code to their server)
• allows users to transfer files from their local computer to a remote server where a website is hosted
• a key tool for uploading and managing website content
• • to access a File Transfer Protocol server, users need File Transfer Protocol client software on their computer

Question 19

“F-12 key”:

Answer 19

• opens the Developer Tools window
• This window allows you to inspect the page styles, element defaults?, webpage aspects, etc.

Question 20

control of CSS box model:

Answer 20

• gains control of (overrides) the default browser behaviors
• Begin with these universal style sheet rules:
  {margin: 0; padding: 0; box-sizing: border-box;}
• margins and padding are no longer automatically applied
• Browser’s default box model no longer applies specified padding/borders outside specified element size