如何解决添加条纹文本阴影和描边
我正尝试添加带有笔触的条纹文本阴影,就像下面的图片一样
这是我到目前为止所获得的,它很接近但不正确。我无法使其与附件中的图片完全一样
.headingStyle {
background-image: -webkit-repeating-linear-gradient(60deg,#ccc,#ccc 1px,#fff 2px,#fff 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
text-transform: uppercase;
font-weight: 700;
}
.headingStyle:after {
background: none;
content: attr(data-text);
left: -.1em;
position: absolute;
text-shadow: 1px 1px 0px #000;
top: -.05em;
text-transform: uppercase;
}
/**/
h1 {
font-size: 5em;
font-family: sans-serif;
margin-left: 100px;}
<h1 class="headingStyle" data-text="UNION">UNION</h1>
在此处找到一个有效的示例:https://codepen.io/patie/pen/KKzWmNV
解决方法
这是另一个近似值,但没有透明度:
.headingStyle {
position: relative;
display:inline-block;
text-transform: uppercase;
font-weight: 700;
letter-spacing:5px;
overflow:hidden;
}
.headingStyle:before {
content: attr(data-text);
left: 0;
position: absolute;
z-index:-1;
text-shadow:
1px 1px 0px #fff,1.3px 1.3px 0px #fff,2px 2px 0px #000,3px 3px 0px #000,4px 4px 0px #000,5px 5px 0px #000,6px 6px 0px #000,7px 7px 0px #000;
top: 0;
color:transparent;
}
.headingStyle:after {
content:"";
position:absolute;
z-index:-1;
top:-200vmax;
left:0;
right:0;
bottom:-200vmax;
background-image:repeating-linear-gradient(0deg,transparent 0 1px,#fff 1.5px 3px);
transform:skewY(45deg);
}
/**/
h1 {
font-size: 5em;
font-family: sans-serif;
margin-left: 100px;
<h1 class="headingStyle" data-text="UNION">UNION</h1>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。