视觉设计应用

视觉设计应用这一节是相比前一节基础CSS添加了CSS3的一些内容，同时更加注重实际应用。

具体内容包括：

设置文字样式，包括html标签如strong, em等，以及css属性如font-size, font-weight, line-height等
设置盒模型，包括宽高、背景颜色、阴影、透明度等
常见定位方式，包括相对定位、绝对定位、固定定位、浮动，以及通过z-index调整元素的呈现方式，margin:auto实现居中
颜色的使用方法，包括如何使用互补色、三次色以及通过hsl设置
通过@keyframes设置动画效果

值得注意的是，有一些小的技巧还设计得挺可爱的，如通过修改link元素的透明度而不是颜色来修改链接的样式，互补色在16进制颜色代码上有明显的对应特征等。

另外还添加了两个小的案例，一个是实现爱心跳动，一个是实现月牙效果来使用这些属性，比之前的习题案例生动许多。

以下是这一节的思维导图和习题解答：

视觉设计应用

Introduction to the Applied Visual Design Challenges

Create Visual Balance Using the text-align Property

Google
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

Adjust the Width of an Element Using the width Property

  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }

Adjust the Height of an Element Using the height Property
```
  h4 {
    text-align: center;
    height: 25px;
  }
```

Use the strong Tag to Make Text Bold

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

Use the u Tag to Underline Text

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

Use the em Tag to Italicize Text

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

Use the del Tag to Strikethrough Text
```
GoogleAlphabet
```
Create a Horizontal Line Using the hr Element
```
GoogleAlphabet
```

Adjust the background-color Property of Text

  h4 {
    text-align: center;
    background-color:rgba(45,45,45, 0.1);
    padding: 10px;
  }

Adjust the Size of a Header Versus a Paragraph Tag

  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }

Add a box-shadow to a Card-like Element

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

Decrease the Opacity of an Element

  .links {
    text-align: left;
    color: black;
    opacity: 0.7;
  }

Use the text-transform Property to Make Text Uppercase

  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
    text-transform: uppercase;
  }

Set the font-size for Multiple Heading Elements

Set the font-weight for Multiple Heading Elements

Set the font-size of Paragraph Text

Set the line-height of Paragraphs

Adjust the Hover State of an Anchor Tag

Change an Element's Relative Position

Move a Relatively Positioned Element with CSS Offsets

Lock an Element to its Parent with Absolute Positioning

Lock an Element to the Browser Window with Fixed Positioning

#navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #767676;
}

Push Elements Left or Right with the float Property

Change the Position of Overlapping Elements with the z-index Property

  .first {
    background-color: red;
    position: absolute;
    z-index: 2;
  }

Center an Element Horizontally Using the margin Property

Learn about Complementary Colors

  .blue {
    background-color: blue;
  }
  .yellow {
    background-color: yellow;
  }

Learn about Tertiary Colors

  .orange {
    background-color:     #FF7D00;
  }
  
  .cyan {
    background-color:     #00FFFF;
  }
  
  .raspberry {
    background-color: #FF007D;
  }

Adjust the Color of Various Elements to Complementary Colors

Adjust the Hue of a Color

  .green {
    background-color: hsl(120, 100%, 50%);
  }
  
  .cyan {
    background-color: hsl(180, 100%, 50%);
  }
  
  .blue {
    background-color:     hsl(240, 100%, 50%);
  }

Adjust the Tone of a Color

  nav {
    background-color:hsl(180, 80%, 25%);
  }

Create a Gradual CSS Linear Gradient

Use a CSS Linear Gradient to Create a Striped Element

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

Create Texture by Adding a Subtle Pattern as a Background Image

Use the CSS Transform scale Property to Change the Size of an Element
```
  #ball2 {
    left:65%;
    transform: scale(1.5);
  }
```
Use the CSS Transform scale Property to Scale an Element on Hover
```
  div:hover {
    transform: scale(1.1);
  }
```

Use the CSS Transform Property skewX to Skew an Element Along the X-Axis

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

Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

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

Create a Graphic Using CSS

Create a More Complex Shape Using CSS and HTML

Learn How the CSS @keyframes and animation Properties Work

  #rect {
    animation-name: rainbow;
    animation-duration: 4s;
  }
  @keyframes rainbow {
    0% {
      background-color: blue;
    }
    50% {
      background-color: green;
    }
    100% {
      background-color: yellow;
    }
  }

Use CSS Animation to Change the Hover State of a Button

  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }

Modify Fill Mode of an Animation

  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    /* add your code below this line */
    animation-fill-mode: forwards;
    /* add your code above this line */
  }

Create Movement Using CSS Animation

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

Create Visual Direction by Fading an Element from Left to Right

  @keyframes fade {
    50% {
      left: 60%;
      opacity: 0.1;
    }
  }

Animate Elements Continually Using an Infinite Animation Count

  #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;
  }

Make a CSS Heartbeat using an Infinite Animation Count

Animate Elements at Variable Rates

  @keyframes twinkle-1 {
    50% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

Animate Multiple Elements at Variable Rates

  .star-1 {
    margin-top: 15%; 
    margin-left: 60%;
    animation-duration: 1s;
    animation-name: twinkle;
  }

  .star-2 {
    margin-top: 25%;
    margin-left: 25%;
    animation-duration: 0.9s;
    animation-name: twinkle;
  }

  .star-3 {
    margin-top: 10%;
    margin-left: 50%;
    animation-duration: 1.1s;
    animation-name: twinkle;
  }

Change Animation Timing with Keywords

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

Learn How Bezier Curves Work

  #ball1 { 
    left: 27%;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  }

Use a Bezier Curve to Move a Graphic

  #red {
    background: red;
    left: 27%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

Make Motion More Natural Using a Bezier Curve

  #green {
    background: green;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311,0.441,0.444,1.649);
  }

视觉设计应用

Introduction to the Applied Visual Design Challenges

Google

GoogleAlphabet

GoogleAlphabet

你可能感兴趣的:(视觉设计应用)