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.

ralphm
—
2011-03-14T04:15:06Z —
#2

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

text-shadow: 0px 0px <font color='"Red"'>10px</font> #7851A9;

PaulOB
—
2011-03-14T12:07:55Z —
#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.

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?

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.

PaulOB
—
2011-03-15T09:00:32Z —
#9

team1504 said:

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
—
2011-03-15T15:51:47Z —
#10

Paul_O_B said:

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.

Paul_O_B said:

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

Completely true. Sorry for stating the obvious.

Paul_O_B said:

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.

Paul_O_B said:

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 syntax2.) or make the glow effect easierbut I seem to have managed with hex colours.