02 Applied Visual Design【FCC】

Applied Visual Design: Create a Gradual CSS Linear Gradient

General syntax:

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

Example:

background:linear-gradient(90deg,red,yellow,rgb(204,204,255))

90度为垂直渐变，45度渐变角度和反斜杆差不多。

Applied Visual Design: Use a CSS Linear Gradient to Create a Striped Element

0px [yellow -- blend -- blue] 40px [green -- blend -- red]80px

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255))

If every two color stop values are the same color, the blending isn’t noticeable because it’s between the same color, followed by a hard transition to
the next color, so you end up with stripes.
颜色停止值相同，直接转向另一个颜色，因此出现条纹。

如下黄黑斜条纹:

div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}

Applied Visual Design: Create Texture by Adding a Subtle Pattern as a Background Image

The key is balance, as you don’t want the background to stand out too much, and take away from the foreground

Applied Visual Design: Use the CSS Transform scale Property to Change the Size of an Element

change the scale of an element, CSS has the transformproperty, along with its scale() function.

添加纹理理背景，注意⚠️纹路小图案要 be balance！平衡！背景就不要抢戏了了！

body {
background: url(https://i.imgur.com/MJAkxbh.png）	

气泡效果：

.ball {
width: 40px;
height: 40px;
margin: 50 auto;
position: fixed;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
border-radius: 50%;
}
#ball1 {
left: 20%;
}
#ball2 {
left: 65%;
transform:scale(1.1);
}

Applied Visual Design: Use the CSS Transform scale Property to Scale an Element on Hover

property has a variety of functions that lets you scale(缩放), move, rotate, skew(倾斜), etc., your elements. When used with
The pseudo-classes such as that specify a certain state of an element, the property can easily add interactivity to your elements.
tansform 可与伪类元素一起使用，增强交互性

div:hover{
transform: scale(1.1)
}

Applied Visual Design: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis

 #bottom {
    background-color: blue;
    transform: skewX(-32deg);
    
 }

Applied Visual Design: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

#top {
    background-color: red;
      transform: skewY(-10deg);
  }  

Applied Visual Design: Create a Graphic Using CSS

月牙：

.center
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: transparentk;
  border-radius: 50%;
  box-shadow: 25px 10px 0px 0px bluen; 
}	

Applied Visual Design: Create a More Complex Shape Using CSS and HTML

Applied Visual Design: Create Visual Balance Using 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.

Applied Visual Design: Adjust the background-color Property of Text

Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().

You’ll use background-color: rgba(45, 45, 45, 0.1)for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.

Code:

background-color:rgba(45,45,45,0.1);

Applied Visual Design: 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, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.

Code:

box-shadow：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）;

Applied Visual Design: Set the font-size for Multiple Heading Elements

The font-sizeproperty is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you’ll set the values for all h1through h6tags to balance the heading sizes.

Code:

font-size: 68px;
font-weight:400;

Applied Visual Design: Adjust the Hue of a Color

Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl()property as an alternative way to pick a color by directly stating these characteristics.

Hue is what 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.

Saturation is 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 is 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.