大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 实现一个好看的网格阴影的文字。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
目录
- 整体效果
- 核心代码
-
- [html 代码](#html 代码)
- [css 部分代码](#css 部分代码)
- 完整代码如下
-
- [html 页面](#html 页面)
- [css 样式](#css 样式)
- 页面渲染效果
整体效果
先绘制出渐变网格的文字效果,再利用
:before
以及搭配content
+attr(...)
实现一个好看的网格阴影的文字。
此效果应该算是上一篇的姊妹篇,可适用于内容的大标题等场景。
上一篇点击阅读:有趣的css - 动态的波纹字
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
html
<div class="font21" data-text="不就是玩嘛">不就是<br>玩嘛</div>
一个
div
标签,添加data-text
。
css 部分代码
css
.font21{
color: transparent;
font-size: 70px;
font-weight: 900;
letter-spacing: 10px;
background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%);
background-size: 4px 4px;
-webkit-background-clip: text;
position: relative;
}
.font21:before{
content: attr(data-text);
letter-spacing: 10px;
color: green;
position: absolute;
top: -6px;
left: -6px;
text-shadow: 2px 2px #ffffff;
}
用
background-image: linear-gradient(...)
拉出网格渐变纹理,然后使用-webkit-background-clip
配合color: transparent
使文字加上纹理,再使用content
+attr(...)
并让其覆盖到网格文字上面,形成视觉阴影效果。
完整代码如下
html 页面
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>好看的网格阴影文字</title>
</head>
<body>
<div class="app">
<div class="font21" data-text="不就是玩嘛">不就是<br>玩嘛</div>
</div>
</div>
</body>
</html>
css 样式
css
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font21{
color: transparent;
font-size: 70px;
font-weight: 900;
letter-spacing: 10px;
background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%);
background-size: 4px 4px;
-webkit-background-clip: text;
position: relative;
}
.font21:before{
content: attr(data-text);
letter-spacing: 10px;
color: green;
position: absolute;
top: -6px;
left: -6px;
text-shadow: 2px 2px #ffffff;
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
[1] 原文阅读
CSS 是一种很酷很有趣的计算机语言,在这里跟大家分享一些 CSS 实例 Demo,为学习者获取灵感和思路提供一点帮助,希望你们喜欢。
我是 Just,这里是「设计师工作日常」,求点赞求关注!