Solved

Sharpen images with CSS (filters)

Posted on 2013-05-27
9
5,503 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
DevOps Toolchain Recommendations

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

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 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