[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1837
  • Last Modified:

Fade image edges with CSS

Is there anyway to fade or feather the edges of an image using CSS?  All I find is drop shadow options or using an image overlay which I don't really want to do.  I found 'inset', but it doesn't work in Chrome (or at least the version I'm using.)  I want it to automatically apply as my client will be updating their site, so they won't have the ability to 'create' images that fade out on the edges.  

I've searched, but everything I find is REALLY old, so I'm hoping there's some new option out there.  Please let me know.  Thanks.
0
StellaBob
Asked:
StellaBob
  • 3
  • 3
2 Solutions
 
COBOLdinosaurCommented:
There is nothing you can do directly to the images.  You need graphics software to do it.  You might be able to do something during generation with PHP and GD:
http://php.net/manual/en/book.image.php

But I don't know that I have the graphics skills necessary to figure out how such a solution would need to be done.

If the images are background images, it might be possible to do something with radial-gradients and transparency on a overlay background, but you will probably run into cross-browser issues even if you get something acceptable that way.

Cd&
0
 
Kyle HamiltonData ScientistCommented:
you could always just apply the brute force approach, and place a transparent image on top of the dynamically generated ones, with absolute positioning. But personally, I don't think it's worth it.

The PHP solution would be interesting.
0
 
COBOLdinosaurCommented:
Absolute position might work but then puts the page on the road to maintenance issues, esspecially in this day of responsive pages and support for a huge range of devices.

logically it should be done in a graphics program, but if the if the client cannot manage the graphics, then you either need to teach them or show them an alternative that does not require skills they don't have.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Kyle HamiltonData ScientistCommented:
A version of what I'm suggesting could be done via PHP server side. See the very last comment on this page:

http://www.php.net/manual/en/function.imagealphablending.php

I think it has potential.
0
 
Kyle HamiltonData ScientistCommented:
actually, just applying the concept of watermarking could work quite nicely. I'm sure there's lots of resources you can find on how to do that in PHP. The 'watermark' in your case is just the overlay that has the fuzzy edges.
0
 
COBOLdinosaurCommented:
The alpha blend still needs GD, but it looks promising, and a fuzzy edge watermark could probably be applied by blending.  

I think trying to use an overlay instead of blending could be a problem down the road, because it assumes that the images are all the same size.  Using GD would would allow for the image size to be variable.

Cd&
0
 
StellaBobAuthor Commented:
I'm surprised with all the advances in CSS that they haven't figured this out, but I appreciate your recommendations.  Thanks.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now