Css Globe

Delicious | Digg | Stumble | Reddit | Float | 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.

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! :)

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | 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.