Soft Edges using CSS?

Question

I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge.

Here is my CSS for the box:

#past{     position:absolute;     left:0;     top:363px;     background-color: rgba(34,34,34,0.6);     /* For IE 5.5 - 7*/     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);     /* For IE 8*/     -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);     z-index:10;     padding:10px; } 

I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image.

Also I would prefer if at all possible for this to work in all browsers.

Thanks for the help. =>

Answer 1

Another option is to use one of my personal favorite CSS tools: box-shadow.

A box shadow is really a drop-shadow on the node. It looks like this:

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5); box-shadow: 1px 2px 3px rgba(0,0,0,.5); 

The arguments are:

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left. 2px: Vertical offset of the effect. Positive numbers shift it down, negative up. 3px: The blur effect.  0 means no blur. color: The color of the shadow. 

So, you could leave your current design, and add a box-shadow like:

box-shadow: 0px -2px 2px rgba(34,34,34,0.6); 

This should give you a 'blurry' top-edge.

This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/