QQ 1640076782

2014年05月30日

纯CSS实现立体文字效果

Filed under: 英语网站设计 — 标签：, — lifengwu @ 10:49 上午

通常情况下，要想实现立体字效果，我们最先想到的肯定是通过PS做成图片，现在我们来看看直接通过CSS实现立体文字的效果。主要是利用text-shadow特性实现效果。

html的全局设置：

body{
background-color: #111;
}
@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);
.text {
font-family:”微软雅黑”, “Dosis”, sans-serif;
font-size: 80px;
text-align: center;
font-weight: bold;
line-height:200px;
text-transform:uppercase;
position: relative;
top:100px;
}
这个根据实际的运用环境，对样式进行修改。
然后是通过专属CSS，用text-shadow实现立体字效果

.effect01{

background-color: #555;

color:#fefefe;

text-shadow:

0px 1px 0px #c0c0c0,

0px 2px 0px #b0b0b0,

0px 3px 0px #a0a0a0,

0px 4px 0px #909090,

0px 5px 10px rgba(0, 0, 0, 0.6);

}

这是最关键的CSS，当然也是可以做修改，可根据实际需要做调整。

最终效果：