Question

我想制作与this site's 标题上写的标题（ Thought Xpress ）类似的效果。我们究竟是如何产生这样的效果的？

我的意思是，该名称似乎是刻录并且有一些 * 蓝色冒烟 *（蓝色在它之上。

Answer 1

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

#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:&#39;Oswald&#39;,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效果会破坏效果。

Answer 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:&#39;Oswald&#39;,Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}

正如评论中所述，它有点混乱

这里有一台发电机：http://css3generator.com
这可能会帮助你想出一些更原始的东西。

蓝色燃烧效果 - 他们是如何做到的。

2 个答案: