标签搜索
隐藏侧边栏

一行CSS代码,竟然可以实现这么多文字效果

搞前端的半夏
2022-05-11 / 0 评论 / 0 点赞 / 105 阅读 / 1,252 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

之前学习过很多text-*属性,当时觉得text-shadow真就一个比较鸡肋的属性。但是今天在实现3D字体的时候,才发现text-shadow对于这种应用场景真的是好用的很。本文我就打算就text-shadow,实现几种CSS文字效果。

本文就用EDG的log来做演示吧。

EDG! NB!

logo的样式是从外部有黑色的圆圈,再往里是白色的圈,中间的是黑的的圆。

如果只用一个div的话,我选择div+::after来实现.

首先是黑色的圆,

 .edg-logo {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    background: #000;
}

再接下来就是黑色圈。

 .edg-logo::after {
     content: "";
     width: 210px;
     height: 210px;
     border-radius: 50%;
     position: absolute;
     top: -15px;
     left: -15px;
     z-index: 1;
     border: 10px solid #000;
 }

image-20211110220722345

立体字体

立体字体的思路主要是设置多个阴影,每个阴影在X和Y轴的偏移方向一直,并且偏移的值是逐渐增加的。zuiho

  span {
        text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,
          -3px -3px 0 #fff, -4px -4px 0 #fff,
          -5px -5px 5px rgb(0, 0, 0),
          -5px -5px 1px rgb(0, 0, 0);
      }

这样子看上去可能不是很立体,因为我设置的阴影比较少,当你设置的阴影越多,效果越明显。

image-20211110221326799

镂空字体

镂空字体的实现思路,其实就是给文字四周都加上阴影,不过最好就是背景和文字颜色差不多,或者一致最好。

 text-shadow:  1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;

image-20211110222526631

模糊字体

模糊字体应该是最简单的,text-shadow实现了提供了一个模糊值的选项。问了模糊效果最好,建议字体颜色透明。

color: transparent;
text-shadow:  0 0 10px #fff;

image-20211110223533858

闪光字体

这个效果,其实跟上面的模糊效果,是亲兄弟。模糊字体主要是将字体颜色透明,或者比阴影颜色更淡。这个效果,不需要设置阴影颜色也可以实现。只要设置阴影模糊值。

text-shadow:  0 0 15px ;

image-20211110223944600

当然提供颜色值的话,效果会更明显。

image-20211110224336167

突出效果

镂空效果是在四周加上阴影,突出则是在一边加上相对的颜色阴影。或者是一边相近一边相反。

color: #ddd;
text-shadow:  1px 1px #000,-1px -1px rgb(219, 201, 201);

0

评论区