SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Help with text-shadow

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    The third value is the one that creates a glow, so you'd need something like

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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 ;

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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>

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Quote Originally Posted by Paul O'B View Post
    Your example of using divs is completely wrong because it is one sentence not multiple divisions..
    Completely true. Sorry for stating the obvious.

    Quote Originally Posted by Paul O'B View Post
    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.

    Quote Originally Posted by Paul O'B View Post
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •