Magnifying Glass for Text and more!

eitanwaxman

eitanwaxman

Posted on July 18, 2022

Magnifying Glass for Text and more!

After discovering the backdrop-filter property - specifically "blur()" function - I thought it would be cool if there was also a "scale()" option.

Unfortunately, I couldn't find anything of the sort. The closest thing I could find to scaling the element behind another element was this W3 tutorial.

But what about text?

And thus the magnifying glass was born:

Open issues:

  • Magic numbers - spent a while trying to math it, but still haven't arrived at the formula that works well for different sizes and scales.
  • linear-gradient of the lens doesn't show above images.

Although this is mostly just for fun, I think this has some real use cases for those who are hard of seeing - there is something to be said for magnification in context (and not just making the entire page bigger).

Maybe a browser extension?

Cheers

💖 💪 🙅 🚩
eitanwaxman
eitanwaxman

Posted on July 18, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Make Voxel Chicky Bounce Call To Action
codepen Make Voxel Chicky Bounce Call To Action

December 14, 2021

Input Box For Halloween
codepen Input Box For Halloween

October 14, 2021

Object.GUI + Stats.ts sample
codepen Object.GUI + Stats.ts sample

November 11, 2020