【每日一练】63—CSS实现金属边框文本效果

写在前面

今天我们练习一个CSS就可以实现的金边框文字效果，很早之前如果我们想要实现这样的效果，基本都是需要借助PS来处理成图片来实现金属边框的效果。

而CSS发展到今天，真的是越来越好用了，现在，我们还是一起来看一下它的最终效果。

截图如下：

另外，说一句，我们的【每日一练】内容会全部发布到web前端开发的博客网站上，博客网站的地址是，www.webqdkf.com

接下来，我们再来看一下具体的实现代码。

HTML代码：

<html>
<head><meta charset="UTF-8"> <title>【每日一练】63-CSS实现金属边框文本效果</title><link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body><div class="box"><div class="bg"> web前端开发 </div><div class="fg">web前端开发</div><p>博客网站：<a href="http://www.webqdkf.com">www.webqdkf.com</a></p></div>
</body>
</html>

CSS代码：

* {box-sizing: border-box;}:root {--gold: #ffb338;--light-shadow: #77571d;--dark-shadow: #3e2904;}body {margin: 0;}.box {background: radial-gradient(#272727, #1b1b1b);display: grid;grid-template-areas: 'overlap';place-content: center;text-transform: lowercase;height: 100vh;}.box > div {  -webkit-background-clip: text;color: #363833;font-family: "Microsoft Yahei","sans-serif";font-weight: 900;font-size: clamp( 3em, 18vw, 15rem);grid-area: overlap;letter-spacing: 1px;-webkit-text-stroke: 4px transparent;}div.bg {background-image: repeating-linear-gradient( 105deg, var(--gold) 0% , var(--dark-shadow) 5%,var(--gold) 12%);color: transparent;filter: drop-shadow(5px 15px 15px black);transform: scaleY(1.05);transform-origin: top;}div.fg{background-image: repeating-linear-gradient( 5deg,  var(--gold) 0% , var(--light-shadow) 23%, var(--gold) 31%);color: #1e2127;transform: scale(1);}.box p{color:#888;font-size:2em;font-family: "Microsoft Yahei","sans-serif";}.box p a{color:#888; text-decoration: none;
}.box p a:hover{color:#fff;  text-decoration: none;
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

【每日一练】63—CSS实现金属边框文本效果相关推荐

【每日一练】97—美丽画卷折叠效果
文 | 杨小爱写在前面在学习和提升自我技能与不断精进的道路上,我们没有办法否认大量刻意练习的作用. 因此,我开设了[每日一练]这个栏目,希望通过这个栏目的内容,养成持续学习与刻意练习的习惯,坚持每 ...
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱写在前面今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
【每日一练】105—CSS实现一款输入文本动画的效果
文 | 杨小爱写在前面关于这个CSS实现的文本动画效果,我们在前面也分享过很多,今天这个是一个输入文本框样式的动画效果,它的最终效果如下: 它的HTML代码很简单,主要是在CSS这块,具体的实现过 ...
【每日一练】48—围绕地球旋转的文本动画效果
写在前面今天我们练习的这个案例是一个文本旋转的效果,这个效果,在浏览器里预览还是非常流畅的,因为我这边用GIF录屏软件直接录制的效果,不是很好. 文本旋转的不流畅,后来录制了一个,但是文件太大了,超 ...
css数字发光,每日CSS_发光文本效果
每日CSS_发光文本效果 2020_12_23 1. 代码解析 1.1 html 代码片段今天你开心吗在里面定义6个字, 分别用不同的 span 表示, 供单个使用 1.2 css 代码 ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
【每日一练】56—CSS实现一款实用的响应式卡片悬停效果
写在前面今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...
【每日一练】19—CSS 实现撕纸的效果
写在前面今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图 ...

【每日一练】63—CSS实现金属边框文本效果

【每日一练】63—CSS实现金属边框文本效果相关推荐

最新文章

热门文章