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

User · Accepted Answer

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/

User · Answer

You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one  Like that  CSS3 Transparency   Gradient  Gradient should be more transparent on top or on top right corner  depending on capabilities

User · Answer

It depends on what type of fading you are looking for   But with shadow and rounded corners you can get a nice result  Rounded corners because the bigger the shadow  the weirder it will look in the edges unless you balance it out with rounded corners   http   jsfiddle net tLu7u    also   http   css3pie com

[css] Soft Edges using CSS?

Examples related to css