textBorder: add border effects to the HTML text with javaScript

textBorder.js creates raised, sunken and blur effects on the html texts.
The effect is achieved by displacing copies of the content object one and two pixels.
The function takes four arguments:

Argument Type Description
obj HTML object Object you apply the effect, applies to the content (innerHTML).
clr1 (Optional) HTML color Color applied to the right and below of the object. By default “#000″
clr2 (optional) HTML color Color applied to the left and above of the object. By default “#fff″
opts (optional)Object opac1:Opacity for the copys with 1 pixel offset. Decimal number from 0 to 1. By default: 0.5
opac2:Opacity for the copys with 2 pixels offset. Decimal number from 0 to 1. By default: 0.3
res: Determines how many times you copy the original text, one or two times. By default : 2

Test it:
div con ID=”idText”:

Sample text
textBorder(document.getElementById("idText"));
Change clr1:
Change clr2:
Change opac1:
Change opac2:
Download textBorder

Leave a Reply

Your email address will not be published. Required fields are marked *