Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Fade image edges with CSS

Posted on 2013-11-13
7
Medium Priority
?
1,731 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 1000 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 1000 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
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.

 
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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

609 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