| 实用

css 扫盲专区

filter

  • 在做模糊、投影效果的时候时常会用到 css 的一个属性 filter
  • 而在 filter 属性中有一个叫 grayscale 的属性，它有什么惊人的作用呢？ 下面来揭晓一下

历史原因

  • 根据我咨询的一个交互设计师透露，在一般的开发中，做类似徽章或者有图片置灰或者正常显示来表示状态的时候，开发会找他们要这两种状态的图片，其实，这是完全用不着的~

  • 比如在上面讲到的做徽章效果的 case 里我们如果有四种勋章，那我们就要用八张图片，如果有八种状态，那么我们就要十六张图片，多！可！怕！

  • 这么多图片我们都已经可以预想到我们的文件体积了

处理技巧

现在让我们用一行 css 代码来搞定它

1
2
3
div .image:hover {
  filter: grayscale(1);  /* 就是这行代码把图片置灰 */
}

效果图

正常显示：

鼠标悬停置灰显示：

filter属性大全

backdrop-filter

  • 此 css 属性是做毛玻璃效果时候的不二选择

根据MDN上对该属性浏览器支持度的统计，我们可以看出来 PC 除了（IE），手机只考虑 IOS 和 安卓的话是全部支持的， very nice~

  • backdrop-filter 又叫背景滤镜，那么他和上面的 filter 有什么不同呢？

    • 首先语法是一毛一样，属性也是一毛一样
    • 不同之处在于， backdrop-filter 会让该元素所在区域后面的内容模糊之类的，而 filter 元素则是作用于该元素本身

效果图

这个毛玻璃的效果就非常明显了~

两个非常实用而小众的东西

灵感来源

  • 这两个属性都是在张旭鑫大神的博客里发现的

神奇传送门 - filter

神奇传送门 - backdrop-filter

三栏布局（自适应）

起因

  • 一直想总结一下三栏自适应布局的问题但都没有动手，趁今天有空，我来补一次

上代码

  • 方式一： table

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <style>
      .container {
        display: table;
        width: 100%;
        height: 100px;
      }

      .container>div {
        display: table-cell;
      }

      .left {
        width: 300px;
        background-color: palevioletred;
      }

      .center {
        background-color: pink;
      }

      .right {
        width: 300px;
        background-color: coral;
      }
    </style>
    <div class="container">
      <div class="left"></div>
      <div class="center">这是中间的元素~</div>
      <div class="right"></div>
    </div>

  • 方法二：position

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <style>
      .container {
        width: 100%;
        height: 100px;
        position: relative;
      }

      .left {
        width: 300px;
        background-color: palevioletred;
        position: absolute;
        left: 0;
        height: 100px;
      }

      .center {
        background-color: pink;
        position: absolute;
        margin-left: 300px;
        margin-right: 300px;
      }

      .right {
        width: 300px;
        background-color: coral;
        position: absolute;
        right: 0;
        height: 100px;
      }
    </style>
    <div class="container">
      <div class="left"></div>
      <div class="center">这是中间的元素~</div>
      <div class="right"></div>
    </div>

  • 方法三：float

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <style>
      .container {
        width: 100%;
        height: 100px;
        overflow: hidden;
      }

      .left {
        width: 300px;
        background-color: palevioletred;
        float: left;
        height: 100px;
      }

      .center {
        background-color: pink;
        margin-right: 300px;
        margin-left: 300px;
      }

      .right {
        width: 300px;
        background-color: coral;
        float: right;
        height: 100px;
      }
    </style>
    <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">这是中间的元素~</div>
    </div>

  • 方法四： BFC (唯一不需要对父级进行设置的方法)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <style>
      .left {
        width: 300px;
        background-color: palevioletred;
        float: left;
        height: 100px;
      }

      .center {
        background-color: pink;
        margin-right: 300px;
        margin-left: 300px;
        overflow: hidden;
      }

      .right {
        width: 300px;
        background-color: coral;
        float: right;
        height: 100px;
      }
    </style>
    <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">这是中间的元素~</div>
    </div>

  • 方法五：flex

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <style>
      .container {
        width: 100%;
        height: 100px;
        display: flex;
      }

      .left {
        width: 300px;
        background-color: palevioletred;
      }

      .center {
        background-color: pink;
        flex: 1;
      }

      .right {
        width: 300px;
        background-color: coral;
      }
    </style>
    <div class="container">
      <div class="left"></div>
      <div class="center">这是中间的元素~</div>
      <div class="right"></div>
    </div>

  • 方法六：grid

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style>
      .container {
        width: 100%;
        height: 100px;
        display: grid;
        grid-template-columns: 300px auto 300px;
      }

      .left {
        background-color: palevioletred;
      }

      .center {
        background-color: pink;
      }

      .right {
        background-color: coral;
      }
    </style>
    <div class="container">
      <div class="left"></div>
      <div class="center">这是中间的元素~</div>
      <div class="right"></div>
    </div>

active伪类与css处理数据上报

有时候我们在页面也需要埋点，根据业务需求去统计一些数据，在遇到禁止执行 js 的浏览器的时候就会很麻烦。所以用 css 会更畅通无阻一些。

例如：

1
2
3
4
5
6
7
8
9
.button-1:active::after {
  content: url(./pixel.gif?action=click&id=button1); /* 替换路径 */
  display: none;
}

.button-2:active::after {
  content: url(./pixel.gif?action=click&id=button2);
  display: none;
}

超级实用的empty伪类

  • 用法一: 匹配空标签
1
2
3
4
5
6
7
8
<div id="content"></div>
<style>
  #content:empty{
    width: 100px;
    height: 50px;
    border: 3px dashed #000;
  }
</style>
  • 用法二: 隐藏空标签
1
2
3
4
5
6
<div id="content"></div>
<style>
  #content:empty{
    display: none;
  }
</style>
  • 自动补全空字段
1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .answer:empty::before{
    content: '暂无';
    color: gray;
  }
</style>
<ul>
  <li>名称:<span class="answer">Joye</span></li>
  <li>性别:<span class="answer"></span></li>
  <li>年龄:<span class="answer">16 ^_^</span></li>
  <li>爱好:<span class="answer">吃</span></li>
</ul>
ESC