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

目录
文章目录隐藏
  1. 语法
  2. 兼容性
  3. 实现方式
  4. 修改引号样式
  5. 处理响应式
  6. 完整代码
  7. 结语

利用 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 来探索新的布局。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 利用css shape-outside属性在圆内设置文本

发表回复