Soft Edge Technique: Soft Edges and Opacity Gradients for Images

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

With this article CSSG continues to provide image manipulation techniques. The trick I am about to demonstrate creates soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create "cloudy" soft edges or one-side opacity gradients without any image editing software.

Take a look at the Demo | Download Soft Edge

Features

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.
Based on the settings from configuration area in JavaScript file, script locates the images, creates a loop where it puts one image on top of the other. First image has opacity set to minimum value while last added image is not transparent. At the same time, using CSS clip property, images are clipped progressively, first image not being clipped at all, while last image (the one on the top) is the most clipped.

soft edge scheme

Usage

To use this trick, download the JavaScript file and link to it from your html page.

<script type="text/javascript" src="softedge/softedge.js"></script>

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;

Enjoy! :)

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

Catar4x on 27 Feb, 2008 wrote:

Very good script !
I love this web site !
Dejan on 27 Feb, 2008 wrote:

great thanks
Marcelo on 28 Feb, 2008 wrote:

Awesome like always use to be!
Steph on 28 Feb, 2008 wrote:

Wow, that's really crazy... I can't believe that's possible *glare*
Braintrove.com on 29 Feb, 2008 wrote:

Great job on this one!
http://www.forumistan.net on 14 Mar, 2008 wrote:

The best, thanks for that...
John Macpherson on 22 Mar, 2008 wrote:

Impressive little bit of Javascript, impressive stuff!
nh on 29 May, 2008 wrote:

Very useful tips. Thanks
Charles Twister on 14 Jun, 2008 wrote:

>Awesome like always use to be!
No, don't speak this.
Gradients are pretty good for many web-design solutions.
I like this web-archive!
äkkilähdöt on 24 Jun, 2008 wrote:

Great tips.Thanks.
jaon on 23 Dec, 2008 wrote:

hey the script works great...i'm kind of new and was wondering how i can get the script to apply to all my images but leave the images in my table instead of piling them up in the corner of my webpage. sorry for the dumb question but i just can't figure it out on my own.
Dale Larsen on 11 Jun, 2009 wrote:

This is a great, I really think you should turn this into a tinyMCE plugin. That way people could apply this to selected code in an easy manner, and... anything you turn into a plugin becomes something that brings traffic to your site.

Also, this would make a great jQuery plugin. From my searching around I can see tha ta lot of people are looking for solutions for things like this.

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe