32 ms·
Apple-like Retina Effect With jQuery
- chime 16y agoIt's pretty neat that they used the border-radius to make the actual div perfectly round. I love it when a feature is used for something completely different than what was intended (make rounded-corners).
- Yaggo 16y agoVery nice. Except the ugly Windows-like font rendering without subpixel anti-aliasing in the "webpage" image.
- frou_dh 16y agoThese days, Linux should be the go-to reference for bad font rendering. I'm sure it can be made to look decent, but it often doesn't.
- moron4hire 16y agoWow, welcome to CSS demos of 6 years ago. http://persistent.info/files/20040508.magnifier/ http://persistent.info/files/20040508.magnifier/ This is the power of CSS3: doing the same things we've always done.
- Yaggo 16y agoYour example uses javascript, while the retina demo does not. > This is the power of CSS3: doing the same things we've always done. True, but CSS3 enables us to do the same things without javascript.
- moxiemk1 16y ago> Your example uses javascript, while the retina demo does not. Except that it is made with JQuery, so it _is_ using JS.
- Yaggo 16y agoCorrect. Not my day. Should read the whole article, including the topic, before posting anything.
- axod 16y agoAlso, no one cares if something uses css rather than js. The endless "X done only using Y" is cool from a hacker perspective, pushing boundaries is where the awesome hacks come. But users will just go 'meh'.
- moron4hire 16y agoPrecisely. Where do we have CSS without JavaScript? And for people who disable JavaScript in their browsers, they get the broken websites they deserve.
- j79 16y agoWow, you need Flash to access the demo/download links? Is this to prevent someone from scraping their tutorials?
- showerst 16y agoOne issue with this that I'd like to point out is that the background is apparently still a .png, so this isn't something you can implement on an HTML <div> out of the box (unless I'm misreading the source).
- frou_dh 16y agoSo.. a MAGNIFYING GLASS effect‽ The constant use of this "retina" term is dubious when referring to the actual iPhone screen, never mind this. p.s. Nice job.
- DLWormwood 16y agoThe term “jeweler’s loupe” is what I’d use myself for this demo... Apple’s use of the term “retina” only serves to remind me of Wired magazine’s original attempt at a website way back when. (They called their Life magazine-like section “retina.”) It’s a common, almost everyday word that nevertheless sounds pretentious or sci-fi—ish.
- WilliamLP 16y agoWas not having it magnify centered around my mouse position, at the edges of the rectangle, a design decision, or a limitation of the tools?
- djb_hackernews 16y agodemo would be better if it were a horizontal bar shape instead of a circle.
- hellweaver666 16y agoQuite easy to fix actually as they use CSS3 border-radius to make the loupe a circle. Just change that bit and you have a rectangle!
- jasonkester 16y agoI think I win the "Earliest Pre-existing Example" award on this one: 1998. Fire up a copy of IE (or Netscape 4) and check it out: http://web.archive.org/web/20010314213015/www.jasonkester.com/dhtml/demo_magnify.cfm http://web.archive.org/web/20010314213015/www.jasonkester.co...
- there 16y agoyou lose points for not having forward compatibility. think of the future!
- jasonkester 16y agoIndeed. Forward compatability for IE is groovy and all, but how does a fella go about predicting document.getElementById back in the days of document.all and document.layers?