Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Sharpen images with CSS (filters)

Posted on 2013-05-27
9
Medium Priority
?
6,677 Views
Last Modified: 2013-06-08
Hi

Is there a sharpen filter in css for images,
the blur filter works fine as demonstrated here:

http://codepen.io/dudleystorey/details/mkgyl
http://experiments.wemakesites.net/css3-gaussian-blur.html

Maybe something can be done with the custom filter?

https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
0
Comment
Question by:kiggsondrome
[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
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39199748
The default rendering of an image is the sharpest it can be in a given browser.  To get it sharper would require detailed re-touching in a graphics program.  Filtering to degrade or modify existing data in the image is possible because data exists, but to make an image sharper more data would be required.  Where would the additional information about the image come from?

Cd&
0
 

Author Comment

by:kiggsondrome
ID: 39199885
with javascript it is apparently possible:

http://www.nihilogic.dk/labs/imagefx/

from what i see it even works in most/all
modern browsers, i have to try now if it will
apply to background images
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39200098
Are you looking for something as a one off or to integrate in a page dynamically?  That library is interesting.  I think I have seen it before.    

Sharpen here actually is taking away pixels.   But that would happen in photoshop too.   I have always done this serverside with www.imagemagick.org installed on my server.   I could see this being used on an admin panel.  http://www.pixastic.com/lib/docs/

If you want something a little more refined,  http://pixlr.com/editor/
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!

 

Author Comment

by:kiggsondrome
ID: 39202384
The editor looks great, i have thumbnail popups displaying them
at 150% of the original thumb images, loading another slightly
bigger popup image from the server takes to much time for the
visitors so javascript sharpening for my site is best.

The scripts from pixastic.com work well and it looks like i can post
a solution later this week.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39203100
Ok, I think I am lost though.  Do I have this right?  You want to start with a thumbnail image maybe 100 to 200 px wide?  Then click or hover causes a pop up of a larger image perhaps 400 to 500 px wide?    

The key will be setting up the image you are saving to the server.  An image that is 400px to 500px wide should probably only be at most 40k to 50k in size (depending on the hight).  Those should load plenty fast on a hover with only  a slight delay.   Something like this http://jsbin.com/isoyez/1/edit
0
 

Author Comment

by:kiggsondrome
ID: 39204620
I'm displaying the same image at different sizes while
enhancing them with javascript sharpening, the resize
possibly is only 140-160%.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39231641
try this...

This is a simple CSS technique by removing the blurr we can actually sharpen the images...

check this out..

 filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

Open in new window

0
 

Author Comment

by:kiggsondrome
ID: 39231712
i have the javascript now with other options too:

http://www.pixastic.com/
http://www.nihilogic.dk/labs/imagefx/
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 1500 total points
ID: 39231728
OK... as you wish...
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

Use email signature images to promote corporate certifications and industry awards.
Adults who share images on social media aren’t the only ones who need to worry about their privacy. Our culture’s tendency to share every move and celebration affects the privacy of our children, too.
The goal of this is to tech the user how to export photos out of Lightroom and the different options they have. Select which photos you want to export : Select where you want to export and with which options : Export :
The goal of the tutorial is to teach the user how to edit a basic portrait of someone. This tutorial shows how to edit two basic photographs, one of a car and one of a person.

704 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