CSS - 镂空文字方案比对

经过思考梳理了以下三个方案,方案1无疑是最好的,但既然有了方案2和方案3的设想,便姑且也尝试写出来试试效果。

方案一 -webkit-text-stroke,color 或 -webkit-text-fill-color

1)用 -webkit-text-stroke(文字描边) 设置文字描边的粗细和颜色;
2)用 color 将文字颜色设置为透明,或者用 -webkit-text-fill-color 将文字填充为透明色。

<div class="embossed-1">Hello World</div>
<div class="embossed-2">Hello World</div>

<style>
.embossed-1 {
  font-size: 24px; font-weight: bolder; background: red;
  -webkit-text-stroke: 1px #333;
  -webkit-text-fill-color: transparent;
}
.embossed-2 {
  font-size: 24px; font-weight: bolder; background: yellow;
  -webkit-text-stroke: 1px #333;
  color: transparent;
}
</style>

方案二 text-shadow,mix-blend-mode

1)用 text-shadow 给文字添加阴影,但是因为它没有提供属性来修改阴影的延伸半径(类似box-shadow的第四个参数),所以描边效果不够锋锐;
2)将字体颜色设置为白色,之所以不随方案一设置为透明色,是因为那么做的话,显示出的是文字下方的文字阴影,而非元素下方的东西;
3)用 mix-blend-mode 将文字颜色与下方背景图像进行混合,上一步文字设置的是白色,那么这里混合方式就选darken,这样经过混合计算后显示的就是下方的背景。

<div class="embossed-1">Hello World</div>
<div class="embossed-2">Hello World</div>
<div class="embossed-3"><div class="text">Hello World</div></div>

<style>
.embossed-1 {
  font-size: 24px; color: #fff;
  text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-2 {
  font-size: 24px; color: #fff; background:red;
  text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-3 {
  font-size: 24px; color: #fff; background:yellow;
  text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-3 .text{mix-blend-mode:darken;}
</style>

方案三 :after,transform

1)首先将文本的每个文字都放到一个单独元素中,并用该元素的:after伪元素进行一定的缩放,然后放置到原文字的上方,遮盖住原文字的身体,只漏出所有笔画的边缘部分;
2):after伪元素的颜色要与文本下方的背景保持一致。

<div class="embossed-1">
  <div class="item" data-text="H">H</div>
  <div class="item" data-text="e">e</div>
  <div class="item" data-text="l">l</div>
  <div class="item" data-text="l">l</div>
  <div class="item" data-text="o">o</div>
  <div class="item" data-text=""></div>
  <div class="item" data-text="W">W</div>
  <div class="item" data-text="o">o</div>
  <div class="item" data-text="r">r</div>
  <div class="item" data-text="l">l</div>
  <div class="item" data-text="d">d</div>
</div>

<style>
.embossed-1 {
  font-size: 24px; font-weight: bolder; color: #fff; background:red;
  display: flex;
}
.embossed-1 .item {
  display: flex; justify-content: center; align-items:center;
  position: relative;
}
.embossed-1 .item:after {
  content: attr(data-text);
  display: flex; justify-content: center; align-items:center;
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  font-weight: normal; color: red; transform:scale(.936);
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半吊子伯爵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值