css制作信封之路

在网上看到今天网易相册开始停运,心里也是感慨万千,从 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等属性来指定方向。

代码展示