tyleo

46 ms·

601.
by tyleo 2y ago
Did my site take > 5 seconds to load? I put a lot of effort into minimizing content. The images are orders of magnitude larger than the page content but should be async. Other assets barely break 20 kB in total aside from the font (100 k
602.
by tyleo 2y ago
This was discussed elsewhere in the comments: > This can be solved with CSS. Extend the background blur all the way through the element and then use CSS masks to cut out the actual shape you want. > With this, you can remove the borde
603.
by tyleo 2y ago
I tried this and it works! One unfortunate impact is a loss in simplicity. In the example on the page you can apply the non-JavaScript version to pretty much any element and get a nice glass effect with `border-radius` and such still functi
604.
by tyleo 2y ago
An interesting tradeoff here is that this is less CPU processing but more content to download. The effect is achieved by imposing a blurred image on top of a non-blurred one. Here is the blurred image used in that demo: https://m
605.
by tyleo 2y ago
You've moved me a place of uncertainty here. I had some confirmation that _some_ browsers use box blurs for this effect, I _know_ some game engines use multiple box blurs to approximate Gaussian blur (having seen the code myself). I up
606.
by tyleo 2y ago
The multi-pass box blur effect is the one I've seen in game engines.
607.
by tyleo 2y ago
Yeah, the abstraction already breaks other common HTML techniques anyways like floating navigation bars.
608.
The Testament of a Furniture Dealer [pdf](inter.ikea.com)
2 points by tyleo 2y ago|0 comments
609.
by tyleo 2y ago
I appreciate you noticed the cleanness. It was a challenge to get it down to 2 divs and 2 classes. I’m disappointed that `background-attachment: fixed` isn’t supported on mobile after all these years. If it were, the full effect could easil
610.
by tyleo 2y ago
For folks who wanted a less intensive glass effect, they could pick and choose from the tutorial. You get a pretty respectable piece of glass at step three with just blur and shadow. I'd personally recommend doing that and mixing in a
611.
by tyleo 2y ago
That's really interesting. I wonder if you could achieve it by a combination of the glassmorphism effects on my page with some neuromorphism effects: https://www.justinmind.com/ui-design/neumorphism With a quick g
612.
by tyleo 2y ago
Yeah because the GPU has special hardware which you can take advantage of for an optimized box filter. https://www.rastergrid.com/blog/2010/09/efficient-gaussian-b...
613.
by tyleo 2y ago
Tbh I agree the final light steps can give it more of an arcade style and feel less realistic. I think if I used this effect widely I’d make a more professional light rays image with a different opacity. I’m not entirely sure I’d use the su
614.
by tyleo 2y ago
Other folks made similar comments. I’ll have to see if this is possible. Your recommendation at the bottom sounds plausible so I’ll give it a go.
615.
by tyleo 2y ago
This is good feedback. I considered putting each example side-by-side with the previous but it was too noisy. I’ll think about it more this morning and see if I can come up with a UX for this that doesn’t interrupt the flow of the article a
616.
by tyleo 2y ago
Yeah, I don’t use this effect across my site because it’s harder to get a good UX with it. That being said, it has more of a place in games. Especially in HUD where you don’t want to occlude the background since that’s the main area a user
617.
by tyleo 2y ago
Funny enough I also implemented the 3D cards in Forza Motorsport 7 :p
618.
by tyleo 2y ago
Tbh it’s more like an edge-lit acrylic effect. We did call it a “subsurface effect” when I worked at Forza but may have been using the term loosely. Forza also was going for acrylic rather than glass and we had several acrylic samples aroun
619.
by tyleo 2y ago
Yes it was! I actually loved that thing.
620.
by tyleo 2y ago
Very cool. The light rays texture can actually do a lot of heavy lifting in the effect. TBH the one I made for the tutorial isn’t even that great. I like the harder lines on that Windows 7 one. I thought about playing with saturation and I
621.
by tyleo 2y ago
Lots of games still use it but its been discontinued by Autodesk and is on its way out. Not to mention Flash also being discontinued.
622.
by tyleo 2y ago
Interesting, I'll add the prefix and install desktop Safari in the future. I was testing on Safari iOS and it looks like the non-prefix version worked there.
623.
by tyleo 2y ago
I was part of an investigation which considered Coherent products for one of the Forza titles. We didn't go with it at the time, and I haven't had the opportunity to use it on a title at other companies, but it looks rad. Forza us
624.
by tyleo 2y ago
Thanks for the tip! I had `user-select: none` on the container which had the glass inside of it but apparently that didn't work. I just updated the page with `user-select: none` on the glass itself and it looks like that did the job.
625.
by tyleo 2y ago
Author here! Happy to answer any questions.
626.
Frosted glass from games to the web(tyleo.com)
791 points by tyleo 2y ago|192 comments
627.
by tyleo 2y ago
I’m not sure what you mean. The shapes in the article do not have corners by the definition I would use… they do have edges and it left me wondering if you could tile 3d space with edge-free shapes.
628.
by tyleo 2y ago
Having run a software team with good estimates, I’m disappointed in some of the commentary of, “just make up a long or obscure estimate.” I don’t expect a considerable amount of unknowns to come up in a project unless you have changing requ
629.
by tyleo 2y ago
Tbh I’ve made peace with this world and I might even enjoy it more than the planned obsolescence one.
630.
by tyleo 2y ago
I love that you captured this! Ironically as I watched your video on Imgur, a full screen ad popped up over top of it on Imgur itself :,(

More ›