CSS效果｜设计：我想要霓虹的文字效果

通过 -webkit-text-stroke、text-shadow来实现

初始

最近公司在搞活动，有个霓虹效果的文字，涉及到了不同语言平台，由设计师切图来进行实现。

但想到运营要进行文案改动的话，那是不是设计又要再切N张图。

改动成本挺高，就想着通过CSS来进行实现，感觉很简单...

熟练的打开VSCode,盯着编辑器半天敲不出几行代码，是谁说简单，拉出去砍了！

进行

开始之前先认识两个属性

-webkit-text-stroke 文字描边

两个属性：描边大小、字体颜色 （注意的是，这个属性是描边居中描边哦）

(ps：这里借用下张鑫旭大大的图，对于这个属性详细了解可以前往 直通车）

text-shadow 文字阴影

四个属性：Y轴偏移、X轴偏移、阴影扩散、阴影颜色

p {
     text-shadow: 5px 10px 5px #e085c7;
}

并且支持多重阴影

p {
      text-shadow: 5px 10px 5px #e085c7,
                   -15px 10px 5px yellow;
}

HTML代码结构

话不多说，开始正文吧。 首先把HTML代码给写出来，很简单，就是一行p标签。

<p data-text="Code - 10% supplement">Code - 10% supplement</p>

说好的一行p标签呢？为什么还有 data-code ?

别问，看下去就知道了。

立体镂空

通过设置 color 为透明 transparent, -webkit-text-stroke 设置1px线距颜色为白，可得一个白色描边文字

 p {
            position: relative;
            font-size: 50px;
            font-weight: bold;
            color: transparent;
            -webkit-text-stroke: 1px #fff;
        }

已知：-webkit-text-stroke 为一个描边字体，那么只要对位置进行调整

-webkit-text-stroke + -webkit-text-stroke = 双倍快立体质感

那这样是不是要多写一层p标签？并不，我们只需要通过伪类content: attr(data-text)即可实现,

attr 可从页面元素动态的获取内容，而不用写死在 css 中。

p::before {
            content: attr(data-text);
            position: absolute;
            margin-top: 1px;
            -webkit-text-stroke: 4px #ba3961;
        }

好像哪里不太对？

我们想要的是白色描边在上方，红色描边在下方，但现在好像反过来了？

别慌，设置伪类中z-index设置为 -1即可。

z-index： 没想到吧？咱可设置为负数，躲在爸爸身后。

这样一个立体的镂空感就出来了，

教霓虹效果，附赠立体镂空文字，是不是学血挣？

还不写霓虹！

霓虹效果

给文字拉个渐变

p {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(180deg, #c42b6c 0 20%, #de7cc3, #c42b6c 80%);
}

得到有金属质感的文字

加上阴影

p::before {
            margin: 1px 0 0 1px;
            -webkit-text-stroke: 7px #cb4f85;
            text-shadow: 0 0 40px #e085c7,
                        0 3px 0 #bf3066,
                        -3px 4px 5px #b03a6b,
                        -4px 5px 5px #b03a6b,
                        0 -2px 2px #b03a6b,
                        0 0 30px #cd7aae;
        }

叠加一层BUFF。啊不，是 after，给最外层加点高管和阴影增强质感

p::after {
            content: attr(data-text);
            position: absolute;
            z-index: -2;
            margin: 0px 0 0 1px;
            left: 0;
            -webkit-text-stroke: 8px #fff;
            text-shadow: 0 0 10px #bd2a5f, 
            5px 0 10px #bd2a5f, 
            0 0 10px #bd2a5f, 
            -10px -5px 15px #bd2a5f, 
            0 5px 20px #bd2a5f, 
            0 5px 20px #bd2a5f, 
            0 10px 30px #b03a6b;
        }

最后

运营：我要IE可以兼容

前端：找UI切图

UI

以上内容就到这里，具体的兼容性问题在这里就不进行探讨了（前端的一生之敌,浏览器兼容)

也希望文章对大家有一定的帮助吧，毕竟写的差ahh，不断努力加油了

完整代码可以前往猛击前往