Solved

Fade image edges with CSS

Posted on 2013-11-13
7
1,402 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
  • 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 43
How to change pointer icon to hand icon on mouseover 2 31
css issues with IE 11 8 37
Background video not displaying in Internet Explorer. 3 26
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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

832 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