# Freecodecamp Applied Visual Design
###### tags: `freecodecamp`

## 挑戰1: Create Visual Balance Using the text-align Property

Text is often a large part of web content. CSS has several options for how to align it with the text-align property.

**`text-align: justify`** causes all lines of text except the last line to meet the left and right edges of the line box.

**`text-align: center`** centers the text

**`text-align: right`** right-aligns the text

**`text-align: left`** (the default) left-aligns the text.

## 挑戰2: Adjust the Width of an Element Using the width Property

img {
  width: 220px;
}

## 挑戰3: Adjust the Height of an Element Using the height Property

img {
  height: 20px;
}

## 挑戰4: Use the strong Tag to Make Text Bold
如果需要把文字變粗體，可以透過`font-weight: bold;` 的做法來執行

但如果需要特定文字變粗體，則需要使用<strong></strong>

## 挑戰5: Use the u Tag to Underline Text
如果需要把文字加上底線，可以使用css的`text-decoration: underline;`特性來進行

如果是部分文字，則是可以使用<u></u>的方式來進行

## 挑戰6: Use the em Tag to Italicize Text
如果要透過css來斜體，可以使用`font-style: italic;`

如果是部分文字，可以使用<em></em>來進行

## 挑戰7: Use the s Tag to Strikethrough Text
刪除線可以使用`text-decoration: line-through;`

可以使用<s></s>來為部分內容加上刪除線

## 挑戰8: Create a Horizontal Line Using the hr Element
使用`<hr>`則可加入水平線

## 挑戰9: Adjust the background-color Property of TextPassed
使用`background-color: rgba(45, 45, 45, 0.1)` 的作法，可以調整顏色與透明度

## 挑戰10: Adjust the Size of a Header Versus a Paragraph Tab
由於h1-h6都有自訂字體，可以再css裡面進行修改

## 挑戰11: Add a box-shadow to a Card-like Element
如何增加陰影:

The box-shadow property takes values for

`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)
`color`

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

## 挑戰12: Decrease the Opacity of an Element
The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.

1. A value of 1 is opaque, which isn't transparent at all.
2. A value of 0.5 is half see-through.
3. A value of 0 is completely transparent.


## 挑戰13: Use the text-transform Property to Make Text Uppercase


## 挑戰14: Set the font-size for Multiple Heading Elements

## 挑戰15: Set the font-weight for Multiple Heading Elements

## 挑戰16: Set the font-size of Paragraph Text

## 挑戰17: Set the line-height of Paragraphs

## 挑戰18: Adjust the Hover State of an Anchor Tag
使用Hover可以讓游標指向的地方立刻變換狀態

## 挑戰19: Change an Element's Relative Position
The following example moves the paragraph 10 pixels away from the bottom:

p {
  position: relative;
  bottom: 10px;
}


## 挑戰20: Move a Relatively Positioned Element with CSS Offsets

## 挑戰21: Lock an Element to its Parent with Absolute Positioning


## 挑戰22: Lock an Element to the Browser Window with Fixed Positioning

fixed position: which is a type of absolute positioning that locks an element relative to the browser window.
凍結窗格的概念啦!!

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


## 挑戰23: Push Elements Left or Right with the float Property

Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires.

透過float可以讓該物件自動靠上、右、下、左


## 挑戰24: Change the Position of Overlapping Elements with the z-index Property
z-index越大，代表塗層越前面

## 挑戰25: Center an Element Horizontally Using the margin Property


## 挑戰26: Learn about Complementary Colors


## 挑戰27: Applied Visual Design: Learn about Tertiary Colors

Tertiary colors:
the result of combining a primary color with one of its secondary color neighbors.

## 挑戰28: Adjust the Color of Various Elements to Complementary Colors


## 挑戰29: Adjust the Hue of a Color


`Hue`
people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.

`aturation`
the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.

`Lightness`
the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.


## 挑戰30: Adjust the Tone of a Color


## 挑戰31: Create a Gradual CSS Linear Gradient
CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background property's linear-gradient() function. Here is the general syntax:

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);


## 挑戰32: Use a CSS Linear Gradient to Create a Striped Element

repeating-linear-gradient() function is very similar to linear-gradient()
the major difference that it repeats the specified gradient pattern.


## 挑戰33: Create Texture by Adding a Subtle Pattern as a Background Image

透過網址套用材質色當背景

## 挑戰34: Use the CSS Transform scale Property to Change the Size of an Element

doubles the size of all the paragraph elements on the page:

p {
  transform: scale(2);
}


## 挑戰35: Use the CSS Transform scale Property to Scale an Element on Hover
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:

p:hover {
  transform: scale(2.1);
}


## 挑戰36: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis


## 挑戰37: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

## 挑戰38: Create a Graphic Using CSS


## 挑戰39: Create a More Complex Shape Using CSS and HTML

1. pseudo-elements
`::before` and `::after`

These pseudo-elements are used to add something before or after a selected element. 

In the following example, a **::before pseudo-element** is used to **add a rectangle to an element with the class heart.**

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

For the ::before and ::after pseudo-elements to function properly, they must have a defined `content` property.

This property is usually used to add things like a **photo** or **text** to the selected element.

When the ::before and ::after pseudo-elements are used to make **shapes**, the content property is still required, but it's set to an **empty string**.

In the above example, the element with the class of heart has a ::before pseudo-element that produces a **yellow rectangle** with height and width of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left and 50px above the top of the element.


## 挑戰40: Learn How the CSS @keyframes and animation Properties Work
Function:
To animate an element.
8 animation properties in total.

`animation-name` : sets the name of the animation, which is later used by `@keyframes` to tell CSS which rules go with which animations.

`animation-duration` sets the length of time for the animation.

`@keyframes` is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%.

example:
If you compare this to a movie:
1. the CSS properties for 0% is how the element displays in the opening scene.
2. The CSS properties for 100% is how the element appears at the end, right before the credits roll.

Then CSS applies the magic to transition the element over the given duration to act out the scene.

The usage of `@keyframes` :

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

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

For the element with the anim id:
`animation-name` to colorful and sets the animation-duration to 3 seconds.
`@keyframes` rule links to the animation properties with the name colorful.

It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%).

You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.


## 挑戰41: Use CSS Animation to Change the Hover State of a Button

You can use CSS @keyframes to change the color of a button in its hover state.

Here's an example of changing the width of an image on hover:

<style>
  img:hover {
    animation-name: width;
    animation-duration: 500ms;
  }

  @keyframes width {
    100% {
      width: 40px;
    }
  }
</style>

<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
Note that ms stands for milliseconds, where 1000ms is equal to 1s.


## 挑戰42: Modify Fill Mode of an Animation
Notice how the animation resets after 500ms has passed, causing the button to revert back to the original color. You want the button to **stay highlighted**.

This can be done by setting the `animation-fill-mode` property to forwards.


## 挑戰43: Create Movement Using CSS Animation
When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement.

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}

Add a horizontal motion to the `div` animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%. Don't replace the top property in the editor - the animation should have both **vertical** and **horizontal** motion.


## 挑戰44 Create Visual Direction by Fading an Element from Left to Right

會動的圓球~ 如何讓它漸層不見


## 挑戰45 Animate Elements Continually Using an Infinite Animation Count
如何讓圖片無限跳動?
透過這個selector，可以調整次序
`animation-iteration-count: ininite;`


## 挑戰46 Make a CSS Heartbeat using an Infinite Animation Count

創造無限的心跳

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count: infinite;

  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count: infinite;

  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

## 挑戰46 Animate Elements at Variable Rates

透過修改keyframe rules的比率，可以使得速度也有所調整

## 挑戰47 Animate Multiple Elements at Variable Rates
調整Animation Duration也是可以的喔

## 挑戰48 Change Animation Timing with Keywords
透過 `animation-timing-function`來調整落下速度
`ease` default，一開始很快，然後中間加速，後來又減速
`ease-out` 先加速後減速
`ease-in` 慢速然後加速
`linear` 始終維持原有速度


## 挑戰49 Learn How Bezier Curves Work

animation-timing-function property from `linear` to its equivalent `cubic-bezier` function value.

## 挑戰50 Use a Bezier Curve to Move a Graphic
如果需要移動，也可以用Bezier來調整

## 挑戰51 Make Motion More Natural Using a Bezier Curve
調整球體速度