How to create drop shadows using only HTML/CSS

August 26, 2010


How to create drop shadow effect on text using only HTML

I wanted to create a shadow effect (example above).
My principal concern was that it would work on most if not all browsers. There are many examples of how this is done using CSS and various cryptic javascript commands which do not seem to work on all browsers. I turned to plain old html code which I could insert in my Gallery3 header.
Here is the code and how it works.

  1. This is the first line or bottom text –  shadow text

  1. This is the top line

    Here is how it works …
    Step 1: Change the position of the shadow text by moving it a little to right or left. In the case above I moved it sligthly to the left of the top text (which is in 2 px to the right of the shadow text therefore after “position: absolute; left:”  I changed it to 10px
    Step 2: Change the position of the shadow text from the top to be sligthly offset from the top text. In this case the top text is 22px and the shadow text is 24px.
    Step 3: I made the shadow higher  (47px versus 44px) 
    Step 4: The font size is the same for both the shadow and top text. 
    Step 5: Colours are changed by fiddling around with the “color:” code.

    What is cool about this method is that by jigging around with the size and positionig you also get a glow effect.

    Easy peasy!

    %d bloggers like this: