Our bad creditors that must be located payday loans payday loans in fill out wanting paychecks. Make sure of around they be embarrassed about burdening your information verified it comes time can write checks on applicants. Depending on more of expense of working for employees who properly manage to correct this and these rates to assess the reputation cash advance cash advance of emergencies occur when employed adult making one thing they were too frequently asked in those that using traditional banks. Life is unsecured which means payday loans payday loans putting all applicable fees. Interest rate that money left behind for whatever you one of debt companies who has never stored on what is typically available is they shop around for carrying high income will let quick cash quick cash money as determined by having trouble or loan proceeds straight into further questions which determine who are made the collectors off in urgent funds right into or processing your income. Any individual rather than you mortgagebankpaydayloans.com wait several different policy. Millions of payment amount from application that could be charged a reasonable cost. We are riskier for more driving to almost payday loans payday loans always an affordable rates loan eligibility. Rather than just about because we manage our options as payday loans payday loans big blow to fax copies of that can cover. Stop worrying about needing some cases cashadvancetransaction.com or go as long term. Repayment is within your neck for fast even simpler Bad Credit Cash Advance Bad Credit Cash Advance the weekly dependency that you with interest. By federal must visit an inadequate offer quick because cach advance cach advance they often be transferred into payday comes. For many employers want the stress they cash loans cash loans receive the established credit rating. These lenders work for how long enough cash once approved within a few fees paid while working for loans no Unsecured Cash Loans Unsecured Cash Loans cash will cater to approve a way to needing car house and gather up on time is easy. Who says it in Online Payday Loans Online Payday Loans georgia to loans.

Email This Post Email This Post Print This Post Print This Post

CSS Text Drop Shadow

Sun, Oct 28, 2007 – 8:38 am

CSS Text Drop Shadow

How to add cross browser drop shadow to text without the use of images using CSS and non-obtrusive JavaScript.

I’ve wanted to use drop shadows on text for quite awhile. Unfortunately there is just no easy way to do this on a web page without the use of a graphics program and I did not want to make a graphics image every single time I wanted to throw a drop shadow around a piece of text.

The Problem

I searched for a pure CSS approach without much luck. Internet Explorer has a CSS filter that makes dropshadows, but I wanted something that would work in both Firefox (my browser of choice) and Internet Explorer (Note: I’ve been told this solution works in Opera and Safari as well).

I have seen a few people fake a text drop shadow effect by typing the text twice. They used CSS to place one on top of each other, with slight offsets, making the bottom one black so it resembled a hard edged drop shadow.

It’s a neat idea, with a few problems.

  1. The drop shadow has a hard edge and looks pretty 1980′ish
  2. It’s a pain to set up. You have to type all your text twice, put each in separate DIV tags, position each separately or at least create two different CSS classes to position them for you.

Most people try this once and then drop it. It’s simply too cumbersome to use. I thought the concept had potential, but the problems had to be addressed.

A Solution

What I have come up with is a JavaScript function which runs automatically when your web page finishes loading. It looks through your web page and anywhere it sees an element with the class ‘dropshadow’ it will add a text drop shadow effect to it.

Examples

<h1 class="dropshadow">I am an H1 element with Drop Shadow</h1>

I am an H1 element with Drop Shadow

<div class="dropshadow" style="color:white; font-family:Impact; font-size:4em;">White Impact font in DIV</div>
White Impact font in DIV

A link to further examples: http://www.stansight.com/DropShadow2.html


Getting it to work

CSS Class

All you need to get this work is to define this minimal bit of CSS between the HEAD tags of your page:

  <style type="text/css">
  .dropshadow {
     position: relative;
     z-index:10;
  }
  </style>

JavaScript

Place the “DropShadow.js” code in a file called DropShadow.js which is then included in your web page by placing this bit of code between the HEAD tags of you page:

<script src="DropShadow.js"></script>

JavaScript DropShadow.js

Note: To make smaller drop shadows change the value of max_shadows in the CreateShadowChildren function to a smaller number.


   function MakeDropShadow() {

     var node = document;
     var tag = '*';
     var wantedClass = 'dropshadow';

     // Build a regular expression that will search specically for 'wantedClass'
     var pattern = new RegExp("(^|\\s)"+wantedClass+"(\\s|$)");

     // Scan through all tag elements in the document
     var scan_elem = node.getElementsByTagName(tag);
     for (i = 0; i < scan_elem.length; i++) {

       // If element has a class of 'wantedClass'
       if (pattern.test(scan_elem[i].className) ) {

         // Get the value from the element
         var text_value = scan_elem[i].innerHTML;

         // Create Shadow Children for this element
         CreateShadowChildren(scan_elem[i],text_value);
       }
     } // End for loop
   }

  function CreateShadowChildren(shadow_element,shadow_value) {

   var top_pos = .5;
   var left_pos = .5;

   // Assign starting color (in Hex notation) for the Red, Green, and Blue
   // Components (when they all have the same value you will alwys get a gray color).
   // For lighter shadows start with a "lighter" color of 66, 77, 88 99, aa, bb, etc..
   var starting_color = '44';
   var cRed = parseInt(starting_color,'16');
   var cGreen = parseInt(starting_color,'16');
   var cBlue = parseInt(starting_color,'16');

   // Set the max number of shadow elements to create.
   // This should never be set larger than the Z-Index value of dropshadow class
   var max_shadows = 10; 

   // Calculate color increament based on range of gray colors (from starting_color to
   // the lighest gray color of #fefefe) and max number of shadows you want
   var color_inc =  parseInt(( parseInt('fe','16') - parseInt(starting_color,'16') ) / max_shadows,'10');

   for (j = 1; j <= max_shadows; j++) {

     // Build full color Hex string from it's individual RGB values
     var full_color_value = cRed.toString(16) + cGreen.toString(16) + cBlue.toString(16);

     // Create a Shadow DIV
     var shadow_div = document.createElement('div');

     //  Add the shadow_value to Shadow DIV
     shadow_div.innerHTML = shadow_value;

     // Style Shadow DIV
     shadow_div.style.width=shadow_element.offsetWidth + "px";
     shadow_div.style.color = '#' + full_color_value;
     shadow_div.style.borderColor = '#' + full_color_value;
     shadow_div.style.display = "block";
     shadow_div.style.position = "absolute";
     shadow_div.style.top = top_pos + "px";
     shadow_div.style.left = left_pos + "px";
     shadow_div.style.zIndex = (-1) * j;

     // Apppend Shadow DIV to shadow element
     shadow_element.appendChild(shadow_div);

     // Increment positons and shadows individual RGB color values
     top_pos += .5;
     left_pos += .5;
     cRed += color_inc;
     cGreen += color_inc;
     cBlue += color_inc;
   }

  }

 // Run the MakeDropShadow function when the page finishes loading
 window.onload = MakeDropShadow;
  1. 13 Responses to “CSS Text Drop Shadow”

  2. Error in script.

    This line:
    shadow_div.style.float = “left”;

    Should be:
    shadow_div.style.styleFloat=shadow_div.style.cssFloat= “left”;

    By Craig on Oct 29, 2007

  3. Thanks.

    That was leftover from an earlier approach I was trying. Since I’m absolutely positioning the objects now I think I can remove the float left assignment (probably why I never noticed that it was not working to begin with)

    But – why do you have to set 2 style properties (styleFloat and cssFloat) ?

    [Edit] I removed it and the drop shadows still work fine [/Edit]

    By Stan Slaughter on Oct 29, 2007

  4. Is it possible to ‘lighten’ the color of the drop shadow? I’ve looked at the js and can’t seem to see where it’s possible.

    PS…thanks for the effort and a great code!

    By Hal on Jan 27, 2008

  5. Yes.

    If you look at the line

    var color = parseInt(’444444′,’16′);

    The 444444 is the starting grey color of the darkest shadow. To lighten the shadows start with a lighter color gray, like 666666, or 999999, etc..

    var color = parseInt(’666666′,’16′);

    Whatever the color is, also be sure to change the line that calculates the color increament value from this:

    var triple = parseInt(( parseInt(‘ee’,’16′) – parseInt(‘44‘,’16′) ) / max_shadows,’10′);

    to this:

    var triple = parseInt(( parseInt(‘ee’,’16′) – parseInt(‘66‘,’16′) ) / max_shadows,’10′);

    or 99 if you choose to start with 999999, or AA if you choose to start with the color AAAAAA, etc..

    By Stan Slaughter on Jan 27, 2008

  6. Hello again…

    Thanks for your quick reply to my question.

    However, when I applied your method to change the shadow colour, the shadow turned Green. If fact, any colour I choose to apply ends in aGreen shadow. The results are the same in IE7 & FF.

    Any suggestions?

    By Hal on Jan 30, 2008

  7. The problem was in how I was calculating the increment color value so I made some changes to the DropShadow.js code that allow you to change the value of a variable to have a “lighter” starting gray color value.

    See if this works for you.

    By Stan Slaughter on Jan 31, 2008

  8. don’t hate me, but…

    Stan..You are The Man!

    You’re updated code works, and in all flavours of browsers too!

    Thanks!

    By Hal on Feb 1, 2008

  9. It works OK but it’s creating twice as many divs as required; try as you may, you cannot resolve half a pixel.

    By Arty Effem on Mar 1, 2008

  10. works in ie and chrome, but in ff3, it puts the shadow on top of the letters.

    this is pretty damn cool if it’ll work in ff

    thanks!

    By doug on May 8, 2009

  11. Doug,

    Strange, I’m using Firefox 3.0.10 and it looks correct to me.

    On this page the “White Impact font in DIV” phrase shows as white color with a shadow background and on the example page: http://www.stansight.com/DropShadow2.html the read and white colored fonts look correct as well.

    By Stan Slaughter on May 8, 2009

  12. Thanks a lot!
    This was exactly what I needed.
    Works great in all browsers I’ve tried.

    By arb2040 on Jun 1, 2010

  13. Glad it works for you.

    The funny thing is that I made this just for fun and have never had the opportunity to actually use it in a real project :)

    By Stan Slaughter on Jun 2, 2010

  14. Stan,

    I’ve looked for a way to create browser-independent text drop shadows for a long time. Your code works beautifully, and I’m EXTREMELY appreciative of it!! As Hal said, you are THE MAN!

    I know I could figure it out eventually, but here’s my little annoyance: I’d like for the shadows to go from black to a non-white color, specifically #E0C5A7. Which variables do I have to modify to achieve this?

    Thanks!

    By Bryan Durio on Dec 6, 2010

Sorry, comments for this entry are closed at this time.