The advantage is that it allows the developer to add a shadow effect to any text that is ordinarily only achievable with an image, whilst giving the user the freedom to select/copy/paste/whatever as they would with any other text.
It works with any text element, and is customisable to allow bespoke horizontal and vertical orientation (in relation to the original text element), opacity and colour.
This text is a paragraph element and uses a yellow shadow via an inner span element for highlighting.
a great big one!
Get the Code
How to Use it
- Save the script somewhere sensible
Import the script, e.g.
- Ensure each HTML text element you wish to add a shadow to has a unique id
Near the bottom of your page, preferably the last tag before your </body>, add your shadows, e.g.
shadow.putShadow('example_shadow', true, -5);
shadow.putShadow('big_one', true, 3, 3, 'green', 40);
- And that's it! Check out the shadows above, play around and see what you can come up with. I'd love to see and hear your feedback and suggestions.
- If you're at all impressed, interested, or just feeling nice, use the bookmarking and sharing facilities at the bottom of the page to spread the word!