利用css shape-outside属性在圆内设置文本

利用css shape-outside属性在圆内设置文本

如何只使用HTML和CSS在圆形内展示文本(如上图),大家可以自己先思考一下实现方式,如果你的项目有这样的需求,你该如何实现?

经过一阵查阅资料发现CSS中有个shape-outside属性名,可以很好实现改效果,在MDN中是这样定义的

译:一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。 默认情况下,内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。

语法

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/*  值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

兼容性

shape-outside兼容性

我的目标是想让<blockquote>在圆形内显示和引用。同时还希望使布局尽可能灵活。这种布局不需要任何其他组件,并且可以使HTML标记干净利落。

注:Internet Explorer或Microsoft Edge 18及更低版本中不支持该shape-outside功能。

实现方式

我们最终将需要一个wrapper元素来实现这一目标,因此让我们将语义<blockquote>用作内部元素。外包装可以是div,html代码如下:

<div class="quote-wrapper"> 
   <blockquote class="text"> 
    <p> 夜,结束了一天的喧嚣后安静下来,伴随着远处路灯那微弱的光。风,毫无预兆地席卷整片旷野,撩动人的思绪万千。星,遥遥地挂在天空之中,闪烁着它那微微星光,不如阳光般灿烂却如花儿般如痴如醉。 </p> 
    <footer>
     – 网摘美句
    </footer> 
   </blockquote> 
</div>

让我们从div外包装器开始。首先,我们将最小(响应)正方形尺寸设置为300px,使其适合较小的屏幕。然后,我们将添加相对定位(因为稍后需要使用)。

.quote-wrapper {
  height: 300px;
  position: relative;
  width: 300px;
}

现在,我们将使blockquote充满整个包装,并伪造一个带有径向渐变背景的圆形。(border-radius在这个例子中我们没有使用)

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
  color: white;
  position: relative;
  margin: 0;
}

有一点需要注意的是,70%显示了一个更粗糙的边缘。我手动添加非常小的百分比增量,发现70.3%看起来是最平滑的。

此时效果:

此时效果

通过CSS处理对段落设置样式:

.text p {
  font-size: 18px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

blockquote::before伪元素来创建外形。这是该shape-outside属性发挥作用的地方。我们绘制出polygon()坐标并将其浮动到左侧,以便文本环绕在形状内。

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

此时效果是这样子的

此时效果是这样子的

看起来不错,但是页脚去了哪里?它溢出了<blockquote>,因此我们无法在白色背景上看到该白色文本。

设置页脚样式

现在,我们可以设置的样式<footer>并为其赋予绝对位置,以使其重新位于圆顶部。

.quote-wrapper blockquote footer {
  bottom: 25px;
  font-size: 17px;
  font-style: italic;
  position: absolute;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}

修改引号样式

我们将利用的::before伪元素.quote-wrapper。再一次,这将需要花费很多时间才能使其看起来正确。我发现line-height它对图标的垂直位置有很大的影响。

.quote-wrapper::before {
  content: "\201C";
  color: #ccc;
  font-family: sans-serif, serif;
  font-size: 270px;
  height: 82px;
  line-height: 1;
  opacity: .9;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
}

实际上卷曲的引号和直的引号是有区别的。我个人建议对话时使用卷曲引号,编码时使用直引号。

处理响应式

如果是在一些大的屏幕上我们需要对部分属性做一个调整。我将断点设置为850px,至于其他的属性修改根据需要作出更改。

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  .quote-wrapper::before {
    font-size: 300px;
  }
  .text p {
    font-size: 26px;
  }
  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

完整代码

//css代码
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: #161b1e;
}

.quote-wrapper {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 10vh auto 0;
}

.text {
    width: 100%;
    height: 100%;
    background: radial-gradient(
	ellipse at center,
	rgba(0, 128, 172, 1) 0%,
	rgba(0, 128, 172, 1) 70%,
	rgba(0, 128, 172, 0) 70.3%
    );
    position: relative;
    margin: 0;
    color: white;
}

.text p {
    height: 100%;
    font-size: 18px;
    line-height: 1.25;
    padding: 0;
    text-align: center;
    font-style: italic;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.text::before {
    content: "";
    width: 50%;
    height: 100%;
    float: left;
    shape-outside: polygon(
	0 0,
	98% 0,
	50% 6%,
	23.4% 17.3%,
	6% 32.6%,
	0 50%,
	6% 65.6%,
	23.4% 82.7%,
	50% 94%,
	98% 100%,
	0 100%
    );
    shape-margin: 7%;
}

.text p::before {
    content: "";
    width: 50%;
    height: 100%;
    float: right;
    shape-outside: polygon(
	2% 0%,
	100% 0%,
	100% 100%,
	2% 100%,
	50% 94%,
	76.6% 82.7%,
	94% 65.6%,
	100% 50%,
	94% 32.6%,
	76.6% 17.3%,
	50% 6%
    );
    shape-margin: 7%;
}

.quote-wrapper blockquote footer {
    width: 100%;
    position: absolute;
    bottom: 25px;
    font-size: 17px;
    text-align: center;
    font-style: italic;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.quote-wrapper::before {
    content: "\201C";
    font-size: 270px;
    height: 82px;
    line-height: 0.78;
    line-height: 1;
    position: absolute;
    top: -48px;
    left: 0;
    z-index: 1;
    font-family: sans-serif, serif;
    color: #ccc;
    opacity: 0.9;
}

@media (min-width: 850px) {
    .quote-wrapper {
        width: 370px;
        height: 370px;
    }

    .quote-wrapper::before {
        font-size: 300px;
    }

    .text p {
        font-size: 26px;
    }

    .quote-wrapper blockquote footer {
        bottom: 32px;
    }
}

结语

以上就是码云笔记前端博客为大家带来的利用css的shape-outside属性结合<blockquote>实现在圆形内展示文本,希望通过本文鼓励大家使用shape-outside来探索新的布局。

关注web前端开发的个人技术博客,分享前端经验和技巧
码云笔记 » 利用css shape-outside属性在圆内设置文本

发表评论

提供最优质的资源集合

立即查看 了解详情