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 · 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/

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

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

[css] Soft Edges using CSS?

Examples related to css