每日一贴: 跟我一起学习Html5+Css3(文字特效)上

宿海仁太 · 发表于 2014-8-29 19:40:26

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<style>
#block{
color: green;
text-shadow: 1px 1px 0px #212121;/*内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的*/
font-size:20px;
}
#block2{
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
}
#block3{

color: red;
text-shadow: 0 -1px 0 #374683;
}

#block4{
/*描边效果*/
color: #c00;
/*-webkit-text-stroke: 1px #000;*/
-webkit-text-stroke:1px #000;
}
#block5{
/*文字抽空*/
-webkit-text-stroke: 1px #000;
-webkit-text-fill-color:transparent;
}
</style>
<div id="block">
宿海仁太
</div>
<div id="block2">
<h2>宿海仁太</h2>
</div>

<div id="block3">
<h1>宿海仁太</h1>
</div>
<div id="block4">
<h1>宿海仁太</h1>
</div>
<div id="block5">
<h1>宿海仁太</h1>
</div>
</body>

</html>
内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题，背景色，前景色，阴影色需要采用有一定的亮度对比色，这样效果更佳，请看下面的效果。
3D文字效果这里没有使用其他的html标签，只是多次应用了CSS3中的text-shadow属性，进行多次阴影设置，并设置不同的阴影色，从而达到一个立体的文字效果。

知识点:
文字描边
文字抽空
文字立体
文件投影

ymgame01 · 发表于 2017-2-4 23:06:42

不错不错。！！！！！！！！！

ymgame01 · 发表于 2017-2-4 23:06:25

哇，太好了，感谢

xuexiyiyuyan007 · 发表于 2015-8-20 13:33:54

找了很久了！终于找到了。

一个人的下午茶 · 发表于 2014-8-29 21:18:56

我第五个赞

梦生 · 发表于 2014-8-29 20:56:26

赞四个

大表舅 · 发表于 2014-8-29 20:10:41

半夏时光发表于 2014-8-29 20:04
已经开始学习HTML了吧，验证码放弃了吧

不 ... 我在写软件

半夏时光 · 发表于 2014-8-29 20:04:09

大表舅发表于 2014-8-29 19:47
赞三个

已经开始学习HTML了吧，验证码放弃了吧

大表舅 · 发表于 2014-8-29 19:47:29

赞三个

半夏时光 · 发表于 2014-8-29 19:42:48

赞两个

		自动登录	找回密码
密码			注册

[JS例程分享] 每日一贴: 跟我一起学习Html5+Css3(文字特效)上

评分