I wanted to create a shadow effect (example above).
Here is the code and how it works.
- This is the first line or bottom text – shadow text
- 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.