视觉设计应用

这部分没有具体的知识点，全都以习题的形式来巩固之前的内容。这里我直接将题目和解答思路放上来：

具体内容包括：

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

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

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

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

Introduction to the Applied Visual Design Challenges

• Create Visual Balance Using the text-align Property

  <h4 style="text-align: center;">Google</h4>
  <p style="text-align: justify">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>

• 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

  <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>

• Use the u Tag to Underline Text

  <p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>

• Use the em Tag to Italicize Text

  <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>

• Use the del Tag to Strikethrough Text

  <h4><del>Google</del>Alphabet</h4>

• Create a Horizontal Line Using the hr Element

  <h4><del>Google</del>Alphabet</h4>
  <hr>

• 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

  <style>
    h1 {
      font-size: 68px;
    }
    h2 {
      font-size: 52px;
    }
    h3 {
      font-size: 40px;
    }
    h4 {
      font-size: 32px;
    }
    h5 {
      font-size: 21px;
    }
    h6 {
      font-size: 14px;
    }
  </style>

• Set the font-weight for Multiple Heading Elements

  <style>
    h1 {
      font-size: 68px;
      font-weight:800;
    }
    h2 {
      font-size: 52px;
      font-weight:600;
    }
    h3 {
      font-size: 40px;
      font-weight:500;
    }
    h4 {
      font-size: 32px;
      font-weight:400;
    }
    h5 {
      font-size: 21px;
      font-weight:300;
    }
    h6 {
      font-size: 14px;
      font-weight:200;
    }
  </style>

• Set the font-size of Paragraph Text

  <style>
    p {
      font-size: 16px;
    }
  </style>

• Set the line-height of Paragraphs

  <style>
    p {
      font-size: 16px;
      line-height: 25px;
    }
  </style>

• Adjust the Hover State of an Anchor Tag

  <style>
    a {
      color: #000;
    }
    a:hover {
      color: blue;
    }
  </style>

• Change an Element’s Relative Position

  <style>
    h2 {
      position: relative;
      top: 15px;
    }
  </style>

• Move a Relatively Positioned Element with CSS Offsets

  <style>
    h2 {
      position: relative;
      bottom: 10px;
      left:15px;
    }
  </style>

• Lock an Element to its Parent with Absolute Positioning

  <style>
    #searchbar {
      position: absolute;
      top: 50px;
      right:50px;
    }
    section {
      position: relative;
    }
  </style>

• 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

  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    float: right;
    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }
  </style>

• 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

  <style>
    div {
      background-color: blue;
      height: 100px;
      width: 100px;
      margin: auto;
    }
  </style>

• 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

  <style>
    body {
      background-color: white;
    }
    header {
      background-color: #09A7A1;
      color: white;
      padding: 0.25em;
    }
    h2 {
      color: #09A7A1;
    }  
    button {
      background-color: #FF790E;
    }
    footer {
      background-color: #09A7A1;
      color: white;
      padding: 0.5em;
    }
  </style>

• 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

  <style>
    div{ 
      border-radius: 20px;
      width: 70%;
      height: 400px;
      margin: 50px auto;
      background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
    }
  </style>

• 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

  <style>
    body {
      background: url("https://i.imgur.com/MJAkxbh.png");
    }
  </style>

• 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

  <style>
  .center
  {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0 0 blue; 
  }
  </style>

• Create a More Complex Shape Using CSS and HTML

  <style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    content: '';
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
  </style>
  <div class = "heart"></div>

• 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

  <style>
    .back {
      position: fixed;
      padding: 0;
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation-name: backdiv;
      animation-duration: 1s; 
      
    }
  
    .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;
      
    }
    .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>

• 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);
  }