字体的正片叠底
效果
思路
运用div的阴影和混合模式，适用于偏暗的背景，字体的div与背景的div叠加达到正片叠底的效果。
- box-shadow
- mix-blend-mode
实现
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transparent text effect</title>
</head>
<style>
body{
background: url(./background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
h1{
color:#fff;
text-transform: uppercase;
position: absolute;
top:50%;
transform: translateY(-50%);
margin:0;
padding:0;
font-size:10em;
text-align: center;
text-shadow: 0px 5px 20px rgba(0,0,0,1);
mix-blend-mode: overlay;
}
</style>
<body>
<div class="box">
<h1>
transparent text effect
</h1>
</div>
</body>
</html>
字体的发光
效果
思路
应用css的伪类，实现div的图层叠加效果，原始层的阴影和伪类层的羽化作为发光
- text-shadow
- :after
- filter
实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lighting</title>
</head>
<style>
body{
background: url(./back.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.light{
margin:0;
padding:0;
color:#fff;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
text-shadow: 0 20px 20px #ff8800;
font-size: 6em;
}
.light:after{
position: absolute;
content: attr(data-text);
left:0;
color:#ff8800;
filter:blur(20px);
padding:0 20px;
z-index: -1;
}
</style>
<body>
<h1 class="light" data-text="[that_gril]">[that_gril]</h1>
</body>
</html>
