css3文字颜色渐变和文字阴影特效

这是一款效果非常好看的css3文字颜色渐变和文字阴影特效。遗憾的是，这些效果只在WEBKIT内核的浏览器才可以看到，其他浏览器需要添加一些回退代码。

下面来看一下制作过程。

文字颜色渐变的制作

这和制作背景渐变效果是一样的，只是将背景放到了文字上。下面是CSS代码

CSS

h1#gradient {
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient {
    background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}
                

HTML

<h1 id="gradient">CSS3 Rocks!</h1>
                

遗憾的是，这个文字效果只在webkit内核的浏览器上才能正常工作。Firefox 浏览器不支持在文字上使用background-clip属性。所以在其他浏览器上查看这个demo时，将回退到一个默认的颜色。我们使用@media screen and (-webkit-min-device-pixel-ratio:0来防止渐变在不支持的浏览器上显示。

浮雕阴影效果

这个效果是使用2个text-shadow来制作。第一个阴影的颜色和背景颜色一样，它用来制作文字和阴影之间的间隙。第二个阴影才是浮雕阴影。下面是CSS代码：

CSS

body {
    background: #441369;   
}
 
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
        background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:none !important;
    }
    h1#gradient span:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); //relief shade effect 
        top: 0;
        z-index: -1;
    }
}
                

HTML

<h1 id="gradient">CSS3 Rocks!</h1>
                

阴影纹理效果

这个效果是在上面的基础上为阴影添加一些图案纹理，使阴影效果更加好看。

CSS

body {
    background: #441369;   
}
 
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
      background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:none !important;
    }
    h1#gradient span:after {
        content: attr(data-text);
        left: 8px;
        position: absolute;
        background: url(RkDRMcJ.png); /* image source for your texture */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1);
        top: 8px;
        z-index: -1;
        width: 100%;
    }
}
                

HTML

<h1 id="gradient">CSS3 Rocks!</h1>
                

通过调整text-shadow的位置和添加一个图片纹理，就可以完成这种效果。