Help with text-shadow

HTML & CSS
1

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

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.

2

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

text-shadow: 0px 0px [COLOR="Red"]10px[/COLOR] #7851A9;
3

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)

4

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

5

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.


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

It worked or the shadow looks simillar with this syntax:

<!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

7

Maybe you could try sommat like this:


<!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>
8

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.

9

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 ? :slight_smile:

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.

10

Essentially exactly what I wanted to do.:slight_smile:

Completely true. Sorry for stating the obvious.

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. :slight_smile:

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!