posted on:February 27, 2008
Soft Edge Technique Soft Edges and Opacity Gradients for Images
Opacity gradients can be turned on and off for all 4 sides of the image separately. With simple configuration you are able to control number of steps of the gradient, step’s width in pixels and, as mentioned, what sides of the image you want to have gradients applied to.
How does this technique work
This is unobtrusive script so it means that no interventions in the html code are necessary, except for class naming to select specific images. If you decide to apply this to all content images then you don’t even have to add class names. The script will collect all content images on your page and apply this script to them.
There is a configuration area in the JS file where you can edit settings and achieve various effects.
// css class of images that you want to apply this script to // if you want to apply this script to all content images, leave this string blank var imageClass = ""; // integer defining the soft edge depth // the larger the number the softer the edges :) var step = 20; // define directions wher you want gradient to appear // set top, right, bottom and left to true or false to turn it on or off // setting all 4 directions to true will give you soft edge effect // while setting one of the var dirTop = false; var dirRight = true; var dirBottom = false; var dirLeft = true; // integer defining each step's width in pixels var stepWidth = 1;
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (12 Comments)
Sorry, the comment form is closed at this time.