利用CSS3实现文字内阴影效果

Posted by Elton's Blog on March 22, 2010

最终效果

在没有CSS3之前,要做到这种文字效果只能借助于Photoshop之类的图片处理软件。 现在很多浏览器已经支持CSS3了(除了该死的IE)。下面将教您如何使用CSS3完成上述效果 Step 1: HTML标签

下面是很简单的HTML标签,用以后面加上CSS特效

Inset Typography

Step 2: 背景

我们想给文字加一个渐变的背景,从#003471 过渡到 #448CCB.

#insetBgd {
 width: 550px;
 height: 100px;
 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

Step 3: 定义文字的样式

首先定义文字的字体,大小和颜色。

h1.insetType {
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  color: #0D4383;
}

Step 4: 实现内阴影效果

这是最关键的一步,也是最后一步。用来实现类似于photoshop的“inner shadow”效果。但是CSS的text-shadow并没有这个效果,我们不得不使用多个黑色和白色的阴影来实现这个效果:

  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;

下面是完整代码:

#insetBgd {
  width: 550px;
  height: 100px;
  background: -moz-linear-gradient(-90deg,#003471,#448CCB);
  background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

h1.insetType {
  padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
  padding-top: 17px;
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  color: #0D4383;
  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}

最终效果