This content originally appeared on DEV Community and was authored by eitanwaxman
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
This content originally appeared on DEV Community and was authored by eitanwaxman
eitanwaxman | Sciencx (2022-07-18T20:57:17+00:00) Magnifying Glass for Text and more!. Retrieved from https://www.scien.cx/2022/07/18/magnifying-glass-for-text-and-more/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.