《响应式Web设计：HTML5和CSS3实战(第2版)》06章

2017-11-07  本文已影响0人  Revontulet

响应式Web设计:HTML5和CSS3实战(第2版)

第六章 CSS3 高级技术

6.1 CSS3 文字阴影特效

  .element{
      text-shadow: 1px 1px 1px #ccc;
  }

  .element{
      text-shadow: -2px -3px 0px #ccc;
  }
  /* 去除阴影效果，可以用text-shadow: none; */
6.1.1 省略blur值
  .element{
      text-shadow: 1px 1px #ccc;
  }
6.1.2 多文字阴影
  .element{
      text-shadow: 
      2px 3px #ccc, /* right and down */
      -3px -3px #999; /* left and up */
  }

6.2 盒阴影

6.2.1 内阴影
  .element {
      box-shadow: inset 0 0 30px #999;
  }
6.2.2 多重阴影
  .element{
      box-shadow: 
      inset 0 0 30px #ccc, /* up */
      inset 0 0 30px #999; /* down */
  }
6.2.3 阴影尺寸（偏移）

6.3 背景渐变

6.3.1 线性渐变语法
  .element{
      background: linear-gradient(red, blue);
  }
  1. 确认渐变方向
    • 渐变将从你设定的反方向开始，当没有设置方向时，渐变默认从顶部到底部
    • 下边代码的渐变方向设定为顶部右侧，即底部左侧开始，红色变为蓝色
  .element{
      background: linear-gradient(to top right, red, blue);
      /*或者数学比较好，用角度*/
      background: linear-gradient(45deg, red, blue);
  }

    .element{
        background: linear-gradient(red -50%, blue);
    }
  1. 色标
    • 使用色标定义复杂的渐变效果
    • 建议不要混用单位
    • 可以在一个渐变效果中添加多个色标
      • 色标用逗号进行分隔
        • 第一部分是颜色
        • 第二部分是颜色的位置
    .element{
        background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 100%);
    }
  1. 兼容旧浏览器
    • 兼容不支持背景渐变效果的浏览器，只需要在之前定义一个背景颜色就可以
    • 目的是老旧浏览器至少会渲染一个背景
  .thing{
      background: red;
      background: linear-gradient(45deg, red, blue);
  }
6.3.2 径向渐变背景
    .thing{
        background: radial-gradient(12em circle at bottom, red, orange, yellow);
    }
6.3.3 为响应式而生的关键字

6.4 重复渐变

6.5 渐变背景制作图案的使用场景

6.6 多张背景图片

  .element{
      /*img01离用户最近*/
      background: 
      url('../img01.jpg'),
      url('../img02.jpg'),
      url('../img03.jpg') left bottom, black;
  }
6.6.1 背景大小
6.6.2 背景位置
6.6.3 背景属性的缩写

6.7 高分辨率背景图

    .bg{
        background-image: url('bg.jpg');
    }
    @media (min-resolution: 1.5dppx) {
        .bg {
            background-image: url('bg@1_5x.jpg');
        }
    }

6.8 CSS滤镜

    .filter{
        filter: drop-shadow(8px 8px 6px #333);
    }

第八章 CSS3过渡、变形和动画

8.1什么是CSS3过渡以及如何使用它

8.1.1 过渡的简写语法
8.1.2 在不同时间段内过渡不同属性
  .style { 
      /* ...（其他样式）... */ 
      transition-property: border, color, text-shadow; 
      transition-duration: 2s, 3s, 8s; 
      }
8.1.3 过渡调速函数

8.2 CSS的2D变形

8.2.1 scale
  .scale:hover { 
      transform: scale(1.4); 
  }
8.2.2 translate
  .translate:hover { 
      transform: translate(-20px, -20px); 
  } 

 + 如果你只传入一个值，它会被应用到X轴上。
 + 如果你想指定一个轴进行移动，可以使用translateX或者translateY。

  .inner { 
      position: absolute; 
      width: 200px; 
      background-color: #999; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
  }
8.2.3 rotate
  .rotate:hover { 
      transform: rotate(30deg); 
  }
8.2.4 skew
  .skew:hover { 
      transform: skew(40deg, 12deg); 
  }
8.2.5 matrix
  .matrix:hover { 
      transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 
  }
8.2.6 transform-origin属性
  .matrix:hover { 
      transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 
      transform-origin: 270px 20px; 
  }

8.3 CSS3的3D变形

  <div class="flipper">
    <span class="flipper-object flipper-vertical"> 
          <span class="panel front">The Front</span>
      <span class="panel back">The Back</span>
    </span>
  </div> 

  .flipper { 
      perspective: 400px; 
      position: relative; 
  } 
  /* 我们将父元素设置为相对定位，从而创造一个上下文来放置flipper-object。 */
  .flipper-object { 
      position: absolute; 
      transition: transform 1s; 
      transform-style: preserve-3d; 
  }

8.4 CSS3动画效果

  @keyframes pulse { 
      100% { 
          text-shadow: 0 0 5px #bbb; 
          box-shadow: 0 0 3px 4px #bbb; 
      } 
  } 

  .flipper:hover .flipper-horizontal { 
      transform: rotateY(180deg); 
      animation: pulse 1s 1s infinite alternate both; 
  }

第九章 表单

9.1-2 理解HTML5表单中的元素

<fieldset>
  <legend>About the offending film (part 1 of 3)</legend>
  <div>
    <label for="film">The film in question?</label>
    <input id="film" name="film" type="text" placeholder="e.g. King 
Kong" required>
  </div>
9.2.1 placeholder
  input:placeholder-shown { 
      color: #333; 
  }
9.2.2 required
9.2.3 autofocus
9.2.4 autocomplete
    <div> 
        <label for="tel">Telephone</label> 
        <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required> 
    </div>

<form id="redemption" method="post" autocomplete="off">

9.2.5 list及对应的datalist元素
  <div>
    <label for="awardWon">Award Won</label>
    <input id="awardWon" name="awardWon" type="text" list="awards">
    <datalist id="awards">
      <select>
        <option value="Best Picture"></option>
        <option value="Best Director"></option>
        <option value="Best Adapted Screenplay"></option>
        <option value="Best Original Screenplay"></option>
      </select>
    </datalist>
  </div>

9.3 HTML5的新输入类型

9.3.1 email
  <div>
    <label for="email">Your Email address</label>
    <input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required>
  </div>
9.3.2 number
  <div> 
      <label for="yearOfCrime">Year Of Crime</label> 
      <input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required> 
  </div>
9.3.3 url
  <div> 
      <label for="web">Your Web address</label> 
      <input id="web" name="web" type="url" placeholder="www.mysite.com"> 
  </div>
9.3.4 tel
  <div>
    <label for="tel">Telephone</label>
    <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
  </div>
9.3.5 search
  <div>
    <label for="search">Search the site...</label>
    <input id="search" name="search" type="search" placeholder="Wyatt Earp">
  </div>
9.3.6 pattern
  <div>
    <label for="name">Your Name (first and last)</label>
    <input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}" placeholder="Dwight Schultz" required>
  </div>
9.3.7 color
  <div> 
      <label for="color">Your favorite color</label> 
      <input id="color" name="color" type="color"> 
  </div>
9.3.8 日期和时间输入类型
  <input id="date" type="date" name="date">

<input id="month" type="month" name="month">

  <input id="week" type="week" name="week"> 

  <input id="time" type="time" name="time">
9.3.9 范围值
  <input type="range" min="1" max="10" value="5"> 

    <input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" onchange="showValue(this.value)">
    <span id="range">5</span>

    <script> 
    function showValue(newValue) 
    { 
    document.getElementById("range").innerHTML=newValue; 
    } 
    </script>

9.4 如何给不支持新特性的浏览器打补丁

    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="js-webshim/minified/polyfiller.js"></script>
    <script> 
        // 引入你需要的功能
        webshim.polyfill('forms'); 
    </script>

9.5使用CSS美化HTML5表单

9.5.1 显示必填项
    input:required { 
    /* 样式*/ 
    }

    input:focus:required { 
    /* 样式*/ 
    }

    input:focus:required { 
    /* 样式*/ 
    }

    .item:hover ~ .item-general-sibling {} { 
    /* 样式*/ 
    }

    .item:hover + .item-adjacent-sibling {} { 
    /* 样式*/ 
    }

    <div class="form-Input_Wrapper">
      <label for="film">The film in question?</label>
      <input id="film" name="film" type="text" placeholder="e.g. King Kong" required/>
    </div>

    input: required + label: after {
      content: "*";
      font - size: 2.1em;
      position: relative;
      top: 6 px;
      display: inline - flex;
      margin-left: .2 ch;
      transition: color, 1s;
    }
    input: required: invalid + label: after {
      color: red;
    }
    input: required: valid + label: after {
      color: green;
    }
9.5.2 创造一个背景填充效果
    input: not([type = "range"]), textarea {
        min-height: 30 px;
        padding: 2 px;
        font-size: 17 px;
        border: 1 px solid# ebebeb;
        outline: none;
        transition: transform .4s, box-shadow .4s, background-position .2s;
        background: radial-gradient(400 px circle, #fff 99 % , transparent 99 % ), #f1f1f1;
        background-position: -400 px 90 px, 0 0;
        background-repeat: no-repeat, no-repeat;
        border-radius: 0;
        position: relative;
      }
    input: not([type = "range"]): focus, textarea: focus {
        background-position: 0 0, 0 0;
      }

第十章 实现响应式Web设计

10.1 尽快让设计在浏览器和真实设备上运行起来

    .rule {
      /* 小型视口样式*/
    }
    @media(min - width: 40e m) {
      .rule {
        /* 中型视口样式*/
      }
    }
    @media(min - width: 70e m) {
      .rule {
        /* 大型视口样式*/
      }
    }

10.2 在真实设备上观察和使用设计

10.3 拥抱渐进增强

10.4 确定需要支持的浏览器

10.4.1 等价的功能，而不是等价的外观
10.4.2 选择要支持的浏览器

10.5 分层的用户体验

10.6将CSS断点与JavaScript联系起来

    @media(min-width: 20rem) {
      body::after {
        content: "Splus";
        font-size: 0;
      }
    }
    @media(min-width: 47.5rem) {
      body::after {
        content: "Mplus";
        font-size: 0;
      }
    }
    @media(min-width: 62.5rem) {
      body::after {
        content: "Lplus";
        font-size: 0;
      }
    }

    var size = window.getComputedStyle(document.body,':after'). 
    getPropertyValue('content'); 

    ;(function alertSize() {
      if (size.indexOf("Splus") != -1) {
        alert('I will run functions for small screens');
      }
      if (size.indexOf("Mplus") != -1) {
        alert('At medium sizes, a different function could run');
      }
      if (size.indexOf("Lplus") != -1) {
        alert('Large screen here, different functions if needed');
      }
    })();

10.7 避免在生产中使用CSS框架

10.8 尽可能使用最简单的代码

    .list-item:nth-child(5) { 
    /* 样式*/ 
    } 

    <li class="list-item specific-class">Item</li> 

    .specific-class { 
    /* 样式*/ 
    }

10.9 根据视口隐藏、展示和加载内容

10.10 验证器和代码检测工具

10.11 性能

上一篇下一篇

猜你喜欢

热点阅读