Wednesday, June 9th, 2010

MagnifyMa: A CSS magnifying glass

Category: CSS, Examples

Jack Prosser has fun proof of concept CSS magnifying glass. He told us a little about it:

The main concept works on using CSS3 for the radius, making a round circle view point. This contains an iframe which is the exact same content. Using CSS3 again I scale the content in the iframe so that it is x2 larger, allowing smaller content to be read. The magnifying glass is also controlled by simple keyboard combinations which allow for show / hide and zooming in and out. Future plans will include Chrome and Firefox add-ons meaning that an iframe will no longer be used and can then use canvas to get the page content, which can then be updated as the page content updates.

Check it out in action:

Posted by Dion Almaer at 5:51 am

4 rating from 5 votes


Comments feed TrackBack URI

I’ve written a magnify glass using canvas for jetpack and I admit this CSS3 version is cool but I don’t like so much the iframe usage.

BTW a great work

Comment by dafi — June 9, 2010

Uber cool.

Comment by Skilldrick — June 9, 2010

I agree with Skilldrick, it is great! I’m using it on my social network.

Comment by ssa5522 — June 10, 2010

Leave a comment

You must be logged in to post a comment.