Elton's Blog

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

by on 三.22, 2010, under Web

最终效果

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

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

1
2
3

<div id="insetBgd">
	<h1 class="insetType">Inset Typography</h1>
</div>

Step 2: 背景

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

1
2
3
4
5
6

#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: 定义文字的样式

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

1
2
3
4
5

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

Step 4: 实现内阴影效果

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

1

  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;

下面是完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#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;
}

最终效果





:, , , ,

1 Comment for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit my friends!

A few highly recommended friends...

Archives

All entries, chronologically...