Solved

Sharpen images with CSS (filters)

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

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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 9

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 9

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39231728
OK... as you wish...
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article shows how to convert a multi-page PDF file into multiple image files, with one image file created for each page of the PDF. It does this by utilizing an excellent, free software package called GraphicsMagick. The solution is amazingly s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now