如何组合CSS text-shadow和“background-image:-webkit-gradient”

时间:2010-09-27 08:38:40

标签: html css text gradient css3

我正在尝试使用CSS文本阴影以及text-shadow和background-image的组合在Chrome / Safari中实现渐变+文本阴影效果:-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;
}

3 个答案:

答案 0 :(得分:17)

渐变“消失”,因为text-shadow位于背景之上。

  1. 文字(透明)
  2. 影子
  3. 背景。
  4. 我们可以通过复制文本并将其放在原始图层下方来解决这个问题,然后在那里应用阴影for example

      h1 {
        position: relative;
        font-size: 100px;
        text-align: center;
      }
    
      h1 div {
        background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute; 
        width: 100%;
    }
      h1:after {
        text-shadow: 10px 10px 11px #fff;
        color: transparent;
      }
    
      #hello:after {
            content: 'Hello World';
      }
    
      <h1 id="hello"><div>Hello World</div></h1>
    

答案 1 :(得分:3)

这个答案类似于上面@KennyTM的答案,除了他的答案将阴影硬编码到CSS中,这不适合动态文本,例如CMS。此外,他的方法需要为每个实例分别使用一个ID,如果您计划大量使用此效果,这将非常繁琐。下面的示例使用了一个类,并允许使用动态文本。

试试这个:

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

h1 div {
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(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属性中的文字相符。

使用一些额外的格式(我使用了Helvetica Neue Ultralight和深色背景),你可以获得如下效果:http://cl.ly/image/2C0k0I3W271D

答案 2 :(得分:0)

如果没有额外的HTML标记或伪元素,您可以使用filter属性和drop-shadow函数来实现此效果。此方法也适用于背景图像与渐变。

h1 {
  font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#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/