如何合并CSS“文本阴影”和“背景图像:- webkit-渐变”

inb24sb2  于 2022-11-27  发布在  其他
关注(0)|答案(4)|浏览(188)

我试图在Chrome/Safari中使用CSS文本阴影和文本阴影与背景图像的组合来实现渐变+文本阴影效果:-webkit-gradient,见示例blw。我只能应用其中一种效果(如果我添加阴影,渐变就会消失。我做错了什么?)

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}
2wnc66cl

2wnc66cl1#

渐变“消失”是因为text-shadow位于背景上方的级别上。
1.文本(透明)
1.影子
1.的背景。
我们可以通过复制文本并将其放在原始图层下面,然后在那里应用阴影for example来解决这个问题:
第一个

t9aqgxwy

t9aqgxwy2#

不需要额外的HTML标记或伪元素,您可以使用filter属性和下拉阴影函数来实现此效果。此方法也适用于背景图像与渐变。

h1 {
  font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
  background-image: linear-gradient(#787878, #484848);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(2px 2px #333);
          filter: drop-shadow(2px 2px #333);
}

小提琴:https://jsfiddle.net/eywda89g/

jq6vz3qz

jq6vz3qz3#

这个答案与上面的@KennyTM的答案类似,只是他的答案将阴影硬编码到CSS中,这不适合CMS中的动态文本。而且,他的方法需要为每个示例提供一个单独的ID,如果你打算经常使用这种效果,这将是非常乏味的。下面的例子使用了一个类,并允许动态文本。
试试这个:

h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
}

h1 div {
    background-image: linear-gradient(teal, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
h1:after {
    text-shadow: 2px 2px 2px #000000;
    color: transparent;
}

.gradient-shadow:after {
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}

然后在HTML中:

<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>

只需确保<div>中的文本与title属性中的文本匹配。
下面是此方法的Codepen示例:https://codepen.io/mprewitt/pen/gexypd

fcg9iug3

fcg9iug34#

这些答案对我得出最终结果帮助很大。谢谢。
所以我想我会分享它。看到我的文字颜色是浅的,我需要一个较深的“边界”在顶部,使它流行。
此外,虽然“ems”更难处理(相对于px),我发现文本阴影的颜色过渡看起来平滑得多,因为我想让它也成为一个梯度:)
作品的边缘,铬,维瓦尔第和火狐,有点模糊虽然。

<h1 class="text3d">Privacy Policy</h1>
      
      .text-3d{
      background-image:linear-gradient(to bottom,#f7eb3b 30%,#f5d839 40%,#eead34 50%, #eb9531 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: 
        drop-shadow(-0.015em -0.015em 0 #ffff00) 
        drop-shadow(-0.015em -0.015em 0 #bf290c) 
        drop-shadow(0 -0.005em 0 #bf290c) 
        drop-shadow(0.010em 0.025em 0 #bf290c) 
        drop-shadow(0.015em 0.030em 0 #b6240b) 
        drop-shadow(0.020em 0.035em 0 #a91d0b) 
        drop-shadow(0.025em 0.040em 0 #8d0d09) 
        drop-shadow(0.030em 0.045em 0 #830708) 
        drop-shadow(0.035em 0.050em 0 #680a07) 
        drop-shadow(0.01em 0.08em 0.01em rgba(0,0,0,0.10))
    }

相关问题