Help with text-shadow

**team1504** · Mar 13, 2011 21:51

Hello guys,
I was playing around with CSS3's text effects to remove as many images as I could on my site and I was wondering if someone could help me with text-shadow.

What I have for text shadow is

Code CSS:

text-shadow: 0px 0px 0px #7851A9;

But, to my dismay, that creates a pretty much invisible text-shadow.

I was wondering if there was any way or syntax that I could give the shadow a width or height, so that it could be positioned directly behind the text, but since it would be larger than the text, it would show.

Essentially, I want to create an outer-glow effect on my text and I hope someone can help me with this.

Thanks in Advance & Best Regards,
Team 1504.

**ralph.m** · Mar 13, 2011 22:15

The third value is the one that creates a glow, so you'd need something like

Code:

text-shadow: 0px 0px 10px #7851A9;

**Paul O'B** · Mar 14, 2011 06:07

The first two values set the vertical and horizontal alignment and the third value as Ralph said sets the blur. If you leave vertical and horizontal at zero and increase the third value you will get the effect that you want.

You can add more than one shadow to the same element for a variety of effects.

text-shadow (CSS property)

**team1504** · Mar 14, 2011 14:23

hmm, well it looks like Multiple Shadows has very little support. Well, according to this, it looks like okay support.

But, the reason why in my above syntax I had it set to zero was because the blur fades or washes out the colour some.

How would I made the colour thicker or bolder?
Use a darker colour or rgba like this site suggests.

Any suggestions on how to make it bolder and be centred and larger than the original text?

Thanks in Advance,
Team 1504

**Paul O'B** · Mar 14, 2011 14:53

Originally Posted by team1504

hmm, well it looks like Multiple Shadows has very little support. Well, according to this, it looks like okay support.

That articles a couple of yeras old and it's now supported in all the modern browsers except IE. (FF3.6, Opera10, Chrome and safari.)

How would I made the colour thicker or bolder?
Use a darker colour or rgba like this site suggests.

Any suggestions on how to make it bolder and be centred and larger than the original text?

Thanks in Advance,
Team 1504

You'd need a darker colour to start with but it depends greatly on your text colour and your current background as it works better on some than others.

Code:

text-shadow:0 0 10px #000, 0 0 20px #7851A9 ;

**team1504** · Mar 14, 2011 17:46

It worked or the shadow looks simillar with this syntax:

Code HTML4Strict:

<!Doctype HTML>
<html lang="en">
	<head>
	<meta charset="utf=8" />
	<title>text-shadow</title>
 
	<style type="text/css">
		body{
			background-color:#fff;
		}
		.headerText{
			margin:0 auto;
			color:#fff;
			text-shadow:0 0 10px #260f47, 0 0 20px #250f49, 0 0 30px #260e48, 0 0 40px #260f49, 0 0 50px #26114d, 0 0 60px #25124b, 0 0 70px #24104c;
			display:inline;
		}
		#name{
			margin-bottom:15px;
			font:48px "Myriad Pro", Calibri, "Lucida Sans Unicode", Helvetica, "Helvetica Neue", "Lucida Sans","Trebuchet MS", Arial;
		}
		#title{
			margin-left:3px;
			font:72px "Trebuchet MS", "Myriad Pro", Calibri, "Lucida Sans Unicode", Helvetica, "Helvetica Neue", "Lucida Sans", Arial;
		}
	</style>
	</head>
	<body>
		<div class="headerText" id="name">The Irf's</div><div class="headerText" id="title">Blog</div>
	</body>
</html>

I guess one can not use more than 7 shadows because when I tried to add another, nothing showed.

btw here is the image I was attempting to replace:

Do you think it looks close enough?

Secondly, I was trying to move the first two words up higher 15px as in the image.
I attempted to do this with the margin-bottom:15px; applied to the #name, the id of those two words, however it does not seem to be working.

Could someone help me move the first two words up if he or she doesn't mind?
or trim or clean the code any bit or make it look anymore like the image, if you feel it is not close enough?

I would really appreciate and thanks for all your help thus far.

Cheers,
Team 1504

**ralph.m** · Mar 14, 2011 19:38

Maybe you could try sommat like this:

Code:

<!Doctype HTML>
<html lang="en">
    <head>
    <meta charset="utf=8" />
    <title>text-shadow</title>
   
<style type="text/css">
body {background-color:#fff;}
p {position: relative;}
.headerText span {
  color:#fff;
  text-shadow:0 0 10px #260f47, 0 0 20px #250f49, 0 0 30px #260e48, 0 0 40px #260f49, 0 0 50px #26114d, 0 0 60px #25124b, 0 0 70px #24104c;
}
#name{
  position: relative; top: -15px;
  font:48px "Myriad Pro", Calibri, "Lucida Sans Unicode", Helvetica, "Helvetica Neue", "Lucida Sans","Trebuchet MS", Arial;
}
#title{
  margin-left:3px; 
  font:72px "Trebuchet MS", "Myriad Pro", Calibri, "Lucida Sans Unicode", Helvetica, "Helvetica Neue", "Lucida Sans", Arial;
}
</style>
</head>
<body>
  <p class="headerText"><span id="name">The Irf's</span><span id="title">Blog</span></p>
</body>
</html>

**team1504** · Mar 14, 2011 21:54

oh duh spans!
Weren't they originally invented as a tag just for specific styling?

Thank you very much ralph and Paul.

EDIT:
Although rgba is not supported by, pretty much, everything except IE, do you think using css 3 rgba/rgb for the colours can make the syntax cleaner in anyway?

And then for the browsers and for IE, I will use conditional comments and use an image fallback.

**Paul O'B** · Mar 15, 2011 03:00

Originally Posted by team1504

oh duh spans!
Weren't they originally invented as a tag just for specific styling?

They were provided for containing sections of inline content that needs to be styled differently to the rest of the line.

Your example of using divs is completely wrong because it is one sentence not multiple divisions. You've given it a class of header text and yet you haven't used a heading tag! Where's the logic in that ?

EDIT:
Although rgba is not supported by, pretty much, everything except IE, do you think using css 3 rgba/rgb for the colours can make the syntax cleaner in anyway?

And then for the browsers and for IE, I will use conditional comments and use an image fallback.

I don't see what you are getting at exactly. I would only use the rgba syntax when I want opacity otherwise hex is easier.

**team1504** · Mar 15, 2011 09:51

Originally Posted by Paul O'B

They were provided for containing sections of inline content that needs to be styled differently to the rest of the line.

Essentially exactly what I wanted to do.

Originally Posted by Paul O'B

Your example of using divs is completely wrong because it is one sentence not multiple divisions..

Completely true. Sorry for stating the obvious.

Originally Posted by Paul O'B

You've given it a class of header text and yet you haven't used a heading tag! Where's the logic in that ?

.

Well this sample is outside of the actual page. Its just that the actual page is filled with other styling and html. But yes, in this html document, I should have used a different class-name. Class-names should be descriptive of or named based on what they are applied to or for-- thats only logical.

Originally Posted by Paul O'B

I don't see what you are getting at exactly. I would only use the rgba syntax when I want opacity otherwise hex is easier.

true. I guess the only reason I was contemplating rgba was that it would either:
1.) clean up the syntax
2.) or make the glow effect easier
but I seem to have managed with hex colours.

Thank you all again!

User Tag List

Thread: Help with text-shadow

Thread Tools

Display

Help with text-shadow

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions