8 Applied Visual Design

Question 1

Align text

Answer 1

text-align: center
left
right
justify

Question 2

Bold text
2 ways

what are the range of numbers and what do they represent?

Answer 2

strong>
/strong>

font-weight: bold
bold
bolder
lighter

(or numbers) Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
200
300
400  - Normal
500
600
700- Bold
800
900

Question 3

Underline text

2 ways

Answer 3

u>
/u>

text-decoration: underline

Question 4

Italicize text

2 ways

Answer 4

em> (for emphasize)
/em>

font-style: italic

Question 5

Slash text

2 ways

Answer 5

s>
/s>

text-decoration: line-through

Question 6

Create a horizontal line

Answer 6

hr>

For horizontal

Question 7

Color with opacity

Answer 7

rgba(255,255,255,1)

alpha is from 0 to 1

Question 8

Create a box shadow

Answer 8

box-shadow: 10px 10px 20px rgba(0,0,0,0.19)
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,
spread-radius and
color, in that order.
Blur and spread radius are optional

Multiple box shadows
box-shadow: 10px, 10px, 20px, rgba(0,0,0,0.19), 10px, 10px, 20px, rgba(0,0,0,0.19)

Question 9

Create a text shadow

Answer 9

text-shadow: 10px 10px 20px rgba(0,0,0,0.19) (no commas in between values)
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,
spread-radius and
color, in that order.
Blur and spread radius are optional

Multiple text shadow
text-shadow: 10px, 10px, 20px, rgba(0,0,0,0.19), 10px, 10px, 20px, rgba(0,0,0,0.19)

Question 10

Opacity

Answer 10

opacity: 0.5

0-1 scale

Question 11

Change text to all upper/lower case, capitalize first letters, initial or inherit.

Answer 11

text-transform: 
uppercase
lowercase
capitalize- "Transform Me Now"
initial- Use the default value
inherit -Use the text-transform value from the parent element
none

inherit:
span {
color: blue;
}

.extra span {
color: inherit;
}

Question 12

Control line spacing

Answer 12

line-height: 25px;

Question 13

Make all anchor tags change color on hover

Answer 13

a {
color: black;
}

a:hover {
color: blue;
}

a psuedoclass

Question 14

How does box and line positioning work in HTML

Answer 14

BLOCK-level items automatically start on a new line while INLINE items sit within surrounding content

The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it.

Question 15

How does relative positioning work?

Answer 15

Move an element visually relative to it’s current position.
It can overlap other elements.

When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item AWAY from where it is normally positioned.

p {
  position: relative;
  bottom: 10px;
}
      Moves 10 px from the bottom (upwards)

p {
  position: relative;
  top: 10px;
}
      Moves 10 px from the top (downwards)

Question 16

How does absolute positioning work?

What defines where it is placed? What happens if its not placed inside another element?

Answer 16

locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it.
The CSS offset properties (top or bottom and left or right) are used to adjust the position.

One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.

position: absolute;
top: 50px;
right: 50px;

Question 17

Lock an element to a parent with absolute positioning.

Answer 17

position: absolute;
top: 50px;
right: 50px;

Question 18

How does fixed position work?

How does it differ from absolute?

Answer 18

a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it’s used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer “realize” where it is positioned, which may require some layout adjustments elsewhere.

One key difference between the fixed and absolute positions is that an element with a fixed position won’t move when the user scrolls.

Question 19

You can have a space in between 12 and px
12px
12 px

Answer 19

false

it has to be like 12px

Question 20

How does the float position work?

Answer 20

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

float: left;

Question 21

How do CSS rules work?
What is a CSS property?
What is a CSS selector?

Answer 21

A CSS rule is a grouping of one or more CSS properties which are to be applied to one or more target HTML elements.

A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule. The CSS properties specifies what to style of the targeted HTML elements.

selector {
property-name : property-value
}

Question 22

Position something in front or behind

What happens if two elements are given identical weight?

Answer 22

Give it the z-index property
z-index: 2 > z-index: 1

z-index: 1
is underneath
z-index: 2

Last processed goes on top by default. the element coming later in the HTML markup will, by default, appear on the top of the other elements.

Question 23

Center an element using margin

Answer 23

margin: auto;

seems to make left and right margins equal.

Question 24

The hue, saturation, lightness method of selecting color

What are the scales for each?

Answer 24

hsl(25, 44%, 100%);
Separated by commas
Hue on a scale from 0 to 350. It circles and can be negative

Question 25

Have a gradient on a background

Answer 25

background: linear-gradient(gradient_direction, color 1, color 2, color 3, …);
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

Question 26

Have a repeating gradient on a background

How does it behave?

Answer 26

background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 80px,
      red 120px
    );
There is a strip at the stated px distance. It blends to the next.
On repeat it doesn't blend.

Question 27

Have a background or texture as the back image.

Answer 27

background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);

Question 28

change the size of something relative to it’s original size

Answer 28

transform: scale(2);
1 = 100%
2 = 200%
3= 300%

Question 29

“transform” functions

Answer 29

transform: scale(2, 0.5);

move, rotate, skewetc.

none Defines that there should be no transformation
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis
translateY(y) Defines a translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis
scaleY(y) Defines a scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
perspective(n) Defines a perspective view for a 3D transformed element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Question 30

How to create a color changing animation

Answer 30

Set the animation's name and duration.
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}  (these can go anywhere. In this case they are properties of an id)

Set the beginning states in terms of % of the duration
@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

Question 31

To make sure it doesn’t change back when the animation is complete

Answer 31

Add:
animation-fill-mode: forwards;
to the selector

Set the animation's name and duration.
#anim {
  animation-name: colorful;
  animation-duration: 3s;
  animation-fill-mode: forwards; 
}

The animation-fill-mode specifies the style applied to an element when the animation has finished.
forwards
backwards
both

Question 32

What sorts of things can be tweened?

Answer 32

Color
Position
Size
Opacity

Question 33

What happens if you don’t designate a 0% or 100% state in an animation?

Answer 33

The starting point is default.

So if only 50% is set, it will start where it starts, go to 50% and then go back.

Question 34

Make the animation loop a certain number of times or for infinite

Answer 34

animation-iteration-count: infinite;
Just jumps back to start of animation.

 #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

can do:
animation-iteration-count: 1.5

Question 35

How to make animation ease or not ease

Answer 35

animation-timing-function: ease-out
ease-in
linear

ex
  .balls {
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  #ball1 {
    left:27%;
    animation-timing-function: linear;
  }

  #ball2 {
    left:56%;
    animation-timing-function:ease-out;
  }

div class=”balls” id=”ball1”> /div>
div class=”balls” id=”ball2”> /div>

Question 36

Ease with more control

Answer 36

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
(with commas)

imagine a 1x1 graph

x axis is the duration
y axis is the change in the animation.

there are 4 main points: p0, p1, p2, and p3
p0 (0,0) and p3 (1,1) are the endpoints.