首页 > 其他分享 >渐变边框文字效果?CSS 轻松拿捏!

渐变边框文字效果?CSS 轻松拿捏!

时间:2024-07-20 12:07:46浏览次数:12  
标签:text stroke 边框 文字效果 background webkit font CSS

今天,有个群友问了我这么一个问题,如果不想切图,是否有办法实现带渐变边框的字体效果?如下所示:

本文,就将尝试一下,在 CSS 中,我们可以如何尽可能的实现这种渐变边框字体效果。

元素叠加

首先,比较容易想到的写法是通过元素叠加实现。

  1. 元素本身实现文字效果本身
  2. 通过元素的伪元素,配合 background-clip: text 实现渐变文字,并且通过 transform 或者设置大几号的文字,实现渐变字体
  3. 将(1)(2)进行叠加

我们尝试一下这种方式:

<div data-text="4"></div>
div {
    position: relative;
    width: 300px;
    height: 150px;
    font-size: 100px;
    text-align: center;
    font-weight: bold;

    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        color: #000;
    }
    
    &::before {
        transform: scale(1.1);
        background: linear-gradient(cyan, #fc0);
        background-clip: text;
        color: transparent;
    }
}

这里,我们让 before 伪元素after 伪元素 两个伪元素进行具体内容的展示,after 伪元素 只展示具体的文字,字号为 100px,而before 伪元素放大一点点后叠加在另外一个伪元素下面,效果如下:

可以看到,这种方式,边框并不均匀。

而且,如果字数更多,效果更差:

所以,通过叠加实现,显然不可取。

通过 SVG feMorphology 滤镜实现

到这里,我又想到,在之前,写过的两篇文章:

我们借助了 SVG 滤镜能够实现对元素的腐蚀(变薄)或扩张(加粗)。

看看原理,feMorphology 为形态滤镜,它的输入源通常是图形的 alpha 通道,用来它的两个操作可以使源图形腐蚀(变薄)或扩张(加粗)。

使用属性 operator 确定是要腐蚀效果还是扩张效果。使用属性 radius 表示效果的程度,可以理解为笔触的大小。

  • operator:erode 腐蚀模式,dilate 为扩张模式,默认为 erode
  • radius:笔触的大小,接受一个数字,表示该模式下的效果程度,默认为 0

我们将这个滤镜简单的应用到文字上看看效果:

<div class="g-text">
    <p>Normal Text</p>
    <p class="dilate">Normal Text</p>
    <p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
    <filter id="dilate">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
    </filter>
    <filter id="erode">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
    </filter>
</svg>
p {
    font-size: 64px;
}
.dilate {
    filter: url(#dilate);
}
.erode {
    filter: url(#erode);
}

效果如下:最左边的是正常文字,中间的是扩张的模式,右边的是腐蚀模式,看看效果,非常好理解:

如果能理解到这一点,我们可以尝试:

  1. 利用 background-clip: text 实现渐变文字
  2. 利用 SVG feMorphology 的腐蚀模式,实现被细化的文字
  3. 将两者叠加起来

代码如下:

<div data-text="123/678"></div>
<div data-text="123/678"></div>
<div data-text="123/678"></div>
<svg width="0" height="0">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="2"></feMorphology>
        <feFlood flood-color="#fff" flood-opacity="1" result="flood"></feFlood>
        <feComposite in="flood" in2="ERODE" operator="in" result="OUTLINE"></feComposite>
        <feMerge>
            <feMergeNode in="OUTLINE" />
        </feMerge>
    </filter>
</svg>

div {
    position: relative;
    width: 100vw;
    height: 150px;
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    
    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
    }
    &::before {
        color: transparent;
        background: linear-gradient(0deg, #da00ff, #2a79b7, #7e3eff);
        background-clip: text;
    }
    &::after {
        filter: url(#outline);
    }
}
div:nth-child(2) {
    font-family: 'Cherry Bomb One', cursive;
    font-size: 90px;
}
div:nth-child(3) {
    font-family: 'Darumadrop One', cursive;
    font-size: 150px;
}

基于此,看看效果,这里我尝试了 3 种不同的字体:

看着还是挺不错的,利用 SVG 能够使源图形腐蚀(变薄)或扩张(加粗)的能力,我们巧妙的实现了文字的渐变边框效果。

完整的 DEMO,你可以戳这里:CodePen Demo -- SVG 实现渐变边框字体

文字边框 -webkit-text-stroke

结束了吗?还没有。一开始我就有想过使用 -webkit-text-stroke 来实现。

但是转念一想,认为 -webkit-text-stroke 无法实现渐变边框,并且它需要使用 -webkit- 前缀,可能会存在兼容问题,结果在讨论的过程中,牛逼的群友给出了使用 -webkit-text-stroke 实现的方式:

<div class="wrapper">
  <span class="text" data-text="1234567890"></span>
  <span class="text" data-text="我能吞下玻璃而不伤身体"></span>
</div>
.wrapper {
  position: relative;
  font-size: 128px;
  
  --stroke-width: 12px;
  --background-gradient: linear-gradient(red 0%, green 100%);
  --text-gradient: linear-gradient(white 0%, cyan 100%);
}

.text {
  position: relative;
}
.text::before,
.text::after {
  content: attr(data-text);
  display: block;
  background-clip: text;
  color: transparent;
}
.text::before {
  position: absolute;
  inset: 0;
  background-image: var(--background-gradient);
  -webkit-text-stroke: var(--stroke-width);
}
.text::after {
  position: relative;
  z-index: 1;
  background-image: var(--text-gradient);
}

-webkit-text-stroke 解法思路本质上也是用的它的背景色,使用了 stroke 的伪元素只是为了让其字更大一圈,从而背景色可以露出来。

并且,-webkit-text-stroke 的边框颜色,可以支持直接设置渐变色,如此一来,我们就得到非常完美的效果:

并且,从 CanIUse - text-stroke,到今天,-webkit-text-stroke 的兼容性已经非常好了:

我们完全可以放心使用 -webkit-text-stroke 设置文字的各种类型边框效果。

完整的 DEMO,你可以戳这里:CodePen Demo -- CSS text stroke with gradient By Rex Zeng

最后

简单总结一下,综上所述,其实 -webkit-text-stroke 是最简单最便捷的实现渐变文字边框的方式。当然,SVG 方法也有其优势,如果需要多重边框效果,甚至是多重渐变文字边框效果,此时,SVG 会更为强大。

好了,本文到此结束,希望本文对你有所帮助

标签:text,stroke,边框,文字效果,background,webkit,font,CSS
From: https://www.cnblogs.com/coco1s/p/18312942

相关文章

  • css技巧混合模式
    看上面这个神奇的效果,文字在黑色背景里面显示为白色,而在白色的背景里面显示为黑色,这就是文字智能适配背景。看到这样的需求,大多数人第一时间想到的是,文字元素有两个,是完全重叠的两层,一层是黑色,一层是白色,然后通过遮罩实现,这里使用了CSS3新增了一个属性-- mix-blend-mode ......
  • 前端必修技能:高手进阶核心知识分享 - CSS伪类和伪元素
    前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素在前端的工作中,经常会遇到伪类和伪元素,但很多人(包括我自己)都没有仔细的去分辨它们,归其原因,大概是因为:写法相似。但其实,伪类和伪元素还是有很多不同的。温......
  • 编织文字之美:WebKit的CSS文本格式化能力全解析
    编织文字之美:WebKit的CSS文本格式化能力全解析在网页设计中,文本不仅是传递信息的媒介,更是展现美学的重要元素。WebKit,作为Safari、QQ浏览器等众多浏览器的内核,提供了强大的CSS文本格式化支持。通过CSS,开发者可以对文本进行丰富的样式设计,从而提升用户体验和网站的视觉吸引......
  • 动态美学:WebKit中CSS转换与动画的魔力
    动态美学:WebKit中CSS转换与动画的魔力在现代网页设计中,CSS转换(Transforms)和动画(Transitions)是实现动态效果的两大法宝。它们能够为用户带来流畅、直观的交互体验。WebKit,作为Safari、QQ浏览器等众多浏览器的核心引擎,对CSS转换和动画提供了全面的支持。本文将深入探讨WebKit......
  • CSS实现点击翻转效果
    1、先看效果就是点击之后反转成蓝色的过程,不知道用什么软件能录制个gif(如果你有什么好的录制gif软件可以告诉我,哈哈),就将就着看吧。上代码,html版本<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......
  • CSS3案例--制作服装软文推广
    效果图:先使用通配符消除样式:字体倾斜效果使用font-style:italic;导入自定义字体样式:其中font-family属性值为自定义名src属性值存放字体样式所在位置 补充知识点:1.后代选择器表示方法:父选择器与后代选择器用空格隔开,或者用>隔开2.并集选择器表示方法:选择器之间用","隔开3.......
  • 【CSS学习第一篇】
    CSS学习第一篇1.CSS简介1.1什么是CSS?1.2CSS语法规范2.CSS选择器2.1CSS选择器的作用2.2CSS选择器的分类2.3标签选择器2.4类选择器2.5id选择器2.6通配符选择器3.CSS字体属性3.1font-family设置字体系列3.2font-size字号大小3.3font-weight字体粗细3.4font......
  • 前端重学笔记-CSS篇-10
    一、HTML5新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。声明:1.新特性增加了很多,但是我们专注于开发常用的新特......
  • CSS盒子模型 (圆角边框,盒子阴影,文字阴影)
    (大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!......
  • CSS综合案例(快报模块头部制作)
    (大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!......