SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  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,592
    Mentioned
    411 Post(s)
    Tagged
    6 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,789
    Mentioned
    158 Post(s)
    Tagged
    3 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,789
    Mentioned
    158 Post(s)
    Tagged
    3 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,592
    Mentioned
    411 Post(s)
    Tagged
    6 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>


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
  •