Solved

Sharpen images with CSS (filters)

Posted on 2013-05-27
9
5,647 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
  • 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 52

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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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 52

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 500 total points
ID: 39231728
OK... as you wish...
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Analytics setup 5 50
jQuery Dialog Autoresize Bug 2 25
binding event to form in window.open 9 39
asp.net open new page without popup blocker 8 19
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.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

830 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