CSS3-- text-shadow写出来的文字效果

转载 (原文地址) tree 随笔 HTML5/CSS3 2383阅读 2014-08-28 20:36:05 举报

学了text-shadow,闲来没事,敲了几种文字效果,跟大家分享下。

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
margin: 0 auto;
padding: 40px 0;
text-align: center;
height: 50;width: 380px;
font-size: 44px;font-weight: bold;
font-family: Britannic Bold;
background: #d5d2c1;
}
.p1{
background: #454545;color: #333;
text-shadow: -1px -1px #ccc, 1px 1px #666;
}
.p2{
background: #000;color: #fff;
text-shadow: 0px 0px 5px #f0f,
0px 0px 10px rgba(255,0,255,0.8),
0px 0px 20px rgba(255,0,255,0.8),
0px 0px 35px rgba(255,0,255,0.8),
0px 0px 55px rgba(255,0,255,0.8);
}
.p3{
background: #ddd;color: #fff;
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 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);
}
.p4{
background: #eee;
color: transparent;
text-shadow: 0 0 8px #f36;
}
.p5{
color: #ccc;
text-shadow: -1px -1px #333,1px 1px #fff;
}
.p6{
background: #eee;color: #707070;
/ -weblit-text-stroke: 1px #00f; /
text-shadow: 0px -1px #00f,0px 1px #00f,1px 0px #00f,-1px 0px #00f;
}
.p7{
-webkit-text-stroke: 1px #000;
-webkit-text-fill-color: transparent;
}
.p8{
background: #eee;color: rgba(255,0,0,0.8);
text-shadow: 0 -3px 6px rgba(255,0,0,0.8),
0 -6px 10px rgba(255,64,0,0.8),
0 -10px 16px rgba(255,0,0,0.8),
0 -16px 24px rgba(255,0,0,0.8),
0 -22px 30px rgba(255,0,0,0.8);
}
</style>
</head>
<body>
<p class="p1">浮雕</p>
<p class="p2">发光</p>
<p class="p3">立体</p>
<p class="p4">模糊</p>
<p class="p5">内陷</p>
<p class="p6">描边</p>
<p class="p7">描边</p>
<p class="p8">火焰</p>
</body>
</html>[/code]

附上效果图:

CSS3--text-shadow写出来的文字效果

代码片段 1

评论 ( 10 )
最新评论
fants613 7F 2014-09-27 13:54:17 10F

狂拽酷炫吊炸天啊

fly_leo 7F 2014-09-02 15:27:51 9F

应该可以吧 用animation 让他动弹起来!一高一低,但是就是阴影不能写渐变! 额,对了阴影可以是写很多层的!不知道能不能写出来渐变的感觉!

V老头 6F 2014-09-02 09:51:43 8F

  

tree 6F 2014-09-01 22:16:06 7F

火焰看起来都有点假。。。还不知道能不能弄成动态的

fly_leo 3F 2014-08-30 19:39:49 6F

帅气异常啊,如果做出来的 阴影能写渐变就好了!加上动画,那个火焰就更性感了!

不新鲜的萝卜皮 3F 2014-08-29 17:17:03 5F

高大上的技能啊

tree 3F 2014-08-29 16:09:42 4F

看了太多吊炸天的人了,所以还真觉得自己没什么。。。

zc43616364 2F 2014-08-29 15:54:28 3F

不错的。。。至少我还没学到这。

tree 2014-08-29 15:49:26 2F

还好吧,颜色的微调比较悲催

zc43616364 2014-08-29 15:30:24 1F

卧槽。。这个吊炸天啊。。~~~