CODEWITHSUNDEEP
htmlcssblogs
user2503843
user2503843

Reputation:

Blue burning effect - how do they do it.?

I wanted to make effects similar to the title(Thought Xpress) written on this site's header. How on earth did we make a effect like that?

I mean, it appears that the name is burning and has some *blueish smoke*(blue) above it.

Upvotes: 0

Views: 167

Answers (2)

Ashish Sharma
Ashish Sharma

Reputation: 342

That site is my blog... Here's the code:

#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}

Note: the fourth line, header h1, is the key answer to your query.

Note: the header:visited is necessary and header:hover effect will ruin the effect.

Upvotes: 6

Alex
Alex

Reputation: 38519

It's the text-shadow property.

I've created a fiddle isolating the bit you need, if you're looking to plagiarize it completely:

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

It's the h1 tag:

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;}

As stated in the comments, it's bit of a mess

There's a generator here: http://css3generator.com
That may help you come up with something a little more original.

Upvotes: 2

Related Questions