0

我想制作类似于此站点标题上的标题（ Thought Xpress）的效果。我们到底是怎么做出这样的效果的？

我的意思是，这个名字似乎在燃烧，并且上面有一些*蓝色烟雾*（蓝色）。

4

2 回答 2

6

该网站是我的博客......这是代码：

#header-wrapper{width:960px;margin:0px auto 0px;padding:24px 0px 23px 0px;overflow:hidden;background:url(some Image) no-repeat;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto;}
#header{margin:10px auto auto 33%;border:0 solid $bordercolor;color:$pagetitlecolor;float:center;width:46%;overflow:hidden;}
#header h1{color:#FFFFFF;text-shadow:0px 1px 0px #000,0 0 10px #05B7FF, 10px -10px 15px #05B7FF, -20px -20px 20px #05B7FF, 20px -40px 25px #05B7FF, -20px -60px 10px #05B7FF, 0 -80px 30px #05B7FF, 10px -90px 40px #05B7FF,2px 2px 10px #05B7FF,0 0 1px #05B7FF, 0 0 2px #05B7FF, 0 0 5px #05B7FF, 0 0 5px #05B7FF, 0 0 5px #05B7FF, 0 0 10px #05B7FF, 0 0 20px #05B7FF, 0 0 30px #05B7FF,0 0 10px #FFFFFF,-2px 0 5px #FFFFFF,0 2px 5px #FFFFFF,0 -2px 5px #FFFFFF;margin:0 5px 0;padding:100px 0px 0px 15px;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}
#header h1 a,#header h1 a:visited{color:#FFFFFF;text-decoration:none}

注意：第四行 ,header h1是您查询的关键答案。

注意：这header:visited是必要的，header:hover效果会破坏效果。

于 2013-06-21T10:45:35.860 回答
2

它是 text-shadow 属性。

如果您想完全抄袭它，我已经创建了一个小提琴来隔离您需要的位：

http://jsfiddle.net/alexjamesbrown/5QWms/

这是h1标签：

h1{color:#FFFFFF;text-shadow:0px 1px 0px #000,0 0 10px #05B7FF, 10px -10px 15px #05B7FF, -20px -20px 20px #05B7FF, 20px -40px 25px #05B7FF, -20px -60px 10px #05B7FF, 0 -80px 30px #05B7FF, 10px -90px 40px #05B7FF,2px 2px 10px #05B7FF,0 0 1px #05B7FF, 0 0 2px #05B7FF, 0 0 5px #05B7FF, 0 0 5px #05B7FF, 0 0 5px #05B7FF, 0 0 10px #05B7FF, 0 0 20px #05B7FF, 0 0 30px #05B7FF,0 0 10px #FFFFFF,-2px 0 5px #FFFFFF,0 2px 5px #FFFFFF,0 -2px 5px #FFFFFF;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}

如评论中所述，这有点混乱

这里有一个生成器：http: //css3generator.com
这可能会帮助你想出一些更原始的东西。

于 2013-06-21T10:46:08.757 回答