Solved

Fade image edges with CSS

Posted on 2013-11-13
7
1,461 Views
Last Modified: 2013-11-18
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
Comment
Question by:StellaBob
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 39645835
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
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 250 total points
ID: 39646778
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39648098
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!

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39648502
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39648515
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39648541
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
 

Author Closing Comment

by:StellaBob
ID: 39656853
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

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question