css制作信封之路

发表于 | 分类于 ， | | 共 1.1k字 | 阅读次数:

在网上看到今天网易相册开始停运，心里也是感慨万千，从 360 网盘停运，到现在网易云相册停运。互联网的产品变化莫测，市场上同类产品竞争大，随时都有可能面临停运。唯有不断创新，不断变化运营理念方可在互联网的风口浪尖存活。以上都是废话，接下来是正题~

在网易云相册停运公告上，看到他是用一种信封方式呈现的，但是他是用的图片，刚好最近在学 css，便想着用 css 实现一下：

确定框架及思路

页面可分为三层

  1. 内容层
  2. 信封封面特殊部分
  3. 信封封面平常部分

分析难点

  • 内容层头部的信封样式，可以使用内容层的border-image实现渐变结合border设置显示大小
  • 信封特殊部分可以使用圆锥渐变实现特殊样式，左右的小三角形可以使用border间接实现

开始实现

组织 html 标签结构
最外层应是一个 div 元素作为一个整体（letter），其中包裹着内容部分(content)和封面部分(cover)
封面部分又包括特殊实现部分（box1）和平常部分（box2）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <body>
    <div class="letter">
      <div class="content">hello css</div>
      <div class="cover">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    </div>
  </body>
</html>

开发 css 样式
这边我先实现底部的样式：

这一部分，我们可以使用圆锥渐变（conic-gradient）实现

1
2
3
4
5
6
7
8
9
10
11
12
13
.cover .box1 {
  position: relative;
  margin-top: 5px;
  width: 100%;
  height: 100px;
  /*    使用圆锥渐变制作特殊部分样式*/
  background: conic-gradient(
    transparent 23%,
    #fde5ca 0,
    #fde5ca 77%,
    transparent 0
  );
}

圆锥渐变是以一个矩形中点到顶部的直线为起点旋转渐变，我们只需要他在 0-23%的时候和 77%-100%的时候为透明色，其他时候为渐变色就可以了。

然后就是左右的小三角形，可以使用 before 和 after 伪元素实现。小三角形利用 border 的渲染特性实现，位置只需要 position 简单定个位就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*  制作左边小三角*/
.cover .box1::before {
  content: "";
  position: absolute;
  top: 0px;
  border-top: 6px solid transparent;
  border-bottom: 3px solid transparent;
  border-right: 20px solid #d29d65;
}

/*  制作右边小三角*/
.cover .box1::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 6px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 20px solid #d29d65;
}

关于 css 中 border 的渲染特性，举个栗子就明白了，我们知道 border 有四条边，而且可以分别设置四条边的颜色

明白了吧，如果把其他三个颜色变为透明，那么就可以实现单个不同方向上的三角形。

开始制作内容页效果

内容页的三条边的阴影可以直接使用 box-shadow 实现，有点难度的是上面的信封样式的条纹。
我们可以使用循环渐变实现，一共渐变三种颜色，红色，蓝色，透明色（白色），这里有一个问题，直接用 border 的颜色是实现不了渐变的。我们要使用 border-image 实现。然后运用 border-top 单独增加一个 10px 的边框，这样渐变封面就只会出现在内容页顶部那一边，对于 repeating-linear-gradient 的用法，可以自行查看资料。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.content {
  width: 91%;
  text-align: center;
  padding: 20px 10px;
  height: 500px;
  background: #fff;
  border-top: 10px solid #eee;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  margin-bottom: -60px;
  /* 制作信封样式*/
  border-image: repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 1em,
      #ffc9c7 0,
      #ffc9c7 2em,
      #dcedff 0,
      transparent 0,
      transparent 3em,
      #dcedff 0,
      #dcedff 4em
    ) 20;
}

总结

  • conic-gradient虽然好用，但是兼容性太差，谷歌浏览器能用，Safari 浏览器最新版可以用，移动端最 chorime67 版本以上可以使用，ios12.2 可以使用。
  • 使用border-image属性是把元素四周都会有效果，要想自定义在哪边有效果，可以用border-top,border-left等属性来指定方向。

代码展示