Solved

Sharpen images with CSS (filters)

Posted on 2013-05-27
9
6,008 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Featured Post

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!

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
The goal of the tutorial is to teach the user how to add a water mark to there photo. Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

710 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