具有渐变和渐变轮廓的CSS文本 [英] CSS Text with Gradient and Gradient Outline
问题描述
我似乎找不到任何东西,也找不到任何人这样做.我试图限制我们使用的图像数量,并希望创建一个带有渐变作为其颜色"的文本,并在其周围具有渐变轮廓/描边
I can't seem to find anything or anyone that has done this. I'm trying to limit how many images we are using, and would like to create a text with a gradient as its "color" and have a gradient outline/stroke around it
到目前为止,我还没有看到将两者结合在一起的任何东西.
So far, I haven't see anything that has incorporated the two together.
我可以单独完成文本渐变,也可以单独完成文本轮廓渐变.有没有办法将两个结合成一个整体?
I've can get the text gradient done, by itself, and the text outline gradient by itself. Is there a way to combine to two as one?
h1 {
text-transform: uppercase;
font-size: 50px;
font-weight: 800;
color: rgb(255, 255, 255);
background-image: linear-gradient(
rgb(255, 255, 255) 46%,
rgb(125, 142, 167) 49%,
rgb(211, 226, 249) 80%
);
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px rgb(0, 0, 0);
}
h1::first-letter {
font-size: 125%;
}
h2 {
font-size: 50px;
font-weight: 800;
text-transform: uppercase;
text-align: center;
background: -webkit-linear-gradient(
-86deg,
#eef85b 5%,
#7aec8d 53%,
#09e5c3 91%
);
-webkit-background-clip: text;
-webkit-text-stroke: 4px transparent;
color: #232d2d;
}
h2::first-letter {
font-size: 125%;
}
https://codepen.io/deelite310/pen/OQxXrR
推荐答案
我之前实现了一个技巧,即使用"data- *"属性和z-index为-1的伪before选择器.然后,您可能需要根据需要删除 font-variant:small-caps
的首字母伪.
There's a trick I've implement before, with the use of the "data-*" attribute and the pseudo before selector with z-index of -1. Then you'd need to remove the first-letter pseudo possibly for font-variant: small-caps
depending on your needs.
注意:使用
z-index = -1
向后抛出图层可能会与其他具有z-index的元素重叠.
Note: Throwing the layer backwards with
z-index=-1
could get overlapped by other elements with a z-index.
h1, h2, h3 {
font-variant: small-caps;
font-size: 50px;
font-weight: 800;
text-align: center;
-webkit-background-clip: text;
}
h1, h3 {
color: rgb(255, 255, 255);
background-image: linear-gradient(
rgb(255, 255, 255) 46%,
rgb(125, 142, 167) 49%,
rgb(211, 226, 249) 80%
);
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px rgb(0, 0, 0);
}
h2, h3::before {
background: -webkit-linear-gradient(
-86deg,
#eef85b 5%,
#7aec8d 53%,
#09e5c3 91%
);
-webkit-background-clip: text;
-webkit-text-stroke: 4px transparent;
color: #232d2d;
}
h3::before {
content: attr(data-text);
position: absolute;
z-index: -1;
}
<h1>Character</h1>
<h2>Character</h2>
<h3 data-text="Character">Character</h3>
这篇关于具有渐变和渐变轮廓的CSS文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!