Applied Visual Design

Question 1

What does text-align: justify; do?

Answer 1

Causes all lines of text except for the last line to meet the left and right edges of the line box

Question 2

Explain how the box-shadow works

Answer 2

Applies one or more shadows to an element. Takes the value of
offset-x: How far to push the shadow horizontally from the element.
offset-y: How far to push the shadow vertically from the element.
blur-radius(optional)
spread-radius(optional)
and color in that order.

Question 3

What does position relative do?

Answer 3

Tells you how CSS should move it relative to its current position.

Question 4

What does position absolute do?

Answer 4

Locks an element in place relative to its parent container. Removes element from normal form of document so everything else ignores it. It will be locked relative to the closest position: relative. If it does not find one it will keep looking up the chain and default to the body tag.

Question 5

What does float do?

Answer 5

It removes the element from the flow of the webpage and sets it either right or left of the containing parent element.

Question 6

How does the z-index work?

Answer 6

Specify the order of how elements are stacked on one another. Must be a number and the higher the number , it moves up on the stack than those with lower numbers.

Question 7

What’s one way to center a horizontal block element?

Answer 7

margin auto

Question 8

What are complimentary colors? Examples?

Answer 8

When two colors are opposite each other on the wheel. When combined, they cancel each other out and create a gray color. Examples are red and cyan, green and magenta, blue and yellow.

Question 9

What are secondary colors?

Answer 9

These colors are made when primary(Red, green, blue) mix. Cyan, magenta and yellow. These secondary colors compliment the primary color that was not used in its making. For example magenta is made with red and blue, and is the compliments green.

Question 10

What are tertiary colors?

Answer 10

Result of combining a primary color with on its secondary colors. Red(primary) and yellow(secondary) mix to create orange(tertiary). This adds six more colors to a simple color wheel for a total of twelve.

Question 11

What is hsl?

Answer 11

A way to define colors. H is for Hue which is the general color. S is for the saturation which is regarding how much gray is in it. A fully saturated 100% has no saturation in it, and l stands for light ranging from 0%(black) to 100%(white) with 50% being the normal color.

Question 12

What are some things that can be done knowing hsl?

Answer 12

Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.

Question 13

Explain how linear gradient works

Answer 13

The first argument specifies the direction from which color transition starts - can be stated as a degree, where 90deg makes a horizontal gradient (from left to right) and 45deg makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient. background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

Question 14

The ::before and ::after come after their specified element. What do they both need to exist?

Answer 14

The content property. If we’re not dealing with stuff like images then we can set it to an empty string such as content: “”.

Question 15

What does @keyframes do?

Answer 15

Specifies what happens in the animation over a duration. If we compare it to a movie, 0% would be the opening scene and 100% would be the closing scene. Here is an example:
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

Question 16

Give an example of how to use the :hover with @keyframes to change the color of a button. Use the animation-fill-mode to keep the hover color going and prevent it from turning back

Answer 16

button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }

Question 17

What is animation-iteration-count?

Answer 17

How many times you’d like to loop an animation.

Question 18

What is the animation-timing-function? What does ease, ease-out, ease-in, and linear do?

Answer 18

Controls how quickly an animated element changes over the duration of the animation. There are predefined values available such as ease, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include ease-out, which is quick in the beginning then slows down, ease-in, which is slow in the beginning, then speeds up at the end, or linear, which applies a constant animation speed throughout.