TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Frosted glass from games to the web

791 点作者 tyleo6 个月前

38 条评论

schobi6 个月前
I really like the aestectics, even if physically wrong at the edges. Thanks for sharing the details.<p>As a embedded developer, I feel this is kind of wasteful. Every client computes an &quot;expensive&quot; blur filter, over an over again? Just for blending to a blurred version of the background image?<p>I know - this is using the GPU, this is optimized. In the end, this should not be much. (is it really?)<p>&lt;rant&gt; I feel the general trend with current web development is too much bloat. Simple sites take 5 seconds to load? Heavy lifting on the client? &lt;&#x2F;rant&gt;... but not the authors fault
评论 #42227255 未加载
评论 #42227407 未加载
评论 #42228047 未加载
评论 #42227144 未加载
评论 #42233759 未加载
评论 #42227115 未加载
评论 #42227121 未加载
评论 #42229408 未加载
评论 #42227601 未加载
评论 #42237225 未加载
评论 #42231299 未加载
评论 #42243114 未加载
grishka6 个月前
I extracted a similar &quot;light rays&quot; texture from Windows 7 when I was trying to replicate its aero glass effect on Android to see what can be done with the new shader APIs. I ended up with something very close to this article, except I didn&#x27;t do the inner shadows but I did increase the saturation of the blurred background a bit.<p><a href="https:&#x2F;&#x2F;mastodon.social&#x2F;@grishka&#x2F;110524476584503201" rel="nofollow">https:&#x2F;&#x2F;mastodon.social&#x2F;@grishka&#x2F;110524476584503201</a>
评论 #42225943 未加载
mrkpdl6 个月前
This is great work, the interactive demo is a good way to show it off too. It’s fun to drag the window over the moon.<p>That said I dislike the use of frosted glass in user interface design, and feel it was a step backwards for Mac OS when it was added. Designers (hypocritically including myself - I use it too sometimes) are so seduced by it. But in practice it’s never ideal. Especially if the content behind the panel is dynamic or user generated.<p>It’s the brushed metal of the 2010s, I’m surprised that it leaked out of Windows Vista into everything else!
评论 #42227435 未加载
评论 #42227589 未加载
评论 #42227826 未加载
评论 #42238593 未加载
评论 #42226523 未加载
riggsdk6 个月前
I did a CSS experiment back in 2008 (before CSS allowed for backdrop-blur) that did the same&#x27;ish effect: <a href="https:&#x2F;&#x2F;webdev.andersriggelsen.dk&#x2F;aero&#x2F;" rel="nofollow">https:&#x2F;&#x2F;webdev.andersriggelsen.dk&#x2F;aero&#x2F;</a><p>It works by using a fixed-position pre-blurred (with glass effects) background image: <a href="https:&#x2F;&#x2F;webdev.andersriggelsen.dk&#x2F;aero&#x2F;bgl.jpg" rel="nofollow">https:&#x2F;&#x2F;webdev.andersriggelsen.dk&#x2F;aero&#x2F;bgl.jpg</a><p>This is a lot more performant than a live gaussian blur but it of course has all the drawbacks of not allowing for a dynamic background image.
评论 #42226630 未加载
评论 #42227203 未加载
cosmotic6 个月前
Cool technical achievement; Bad UX. It&#x27;s harder to read or understand anything inside a translucent panel than one with a consistent, solid background because of lower and inconsistent contrast with the background. Additionally, things potentially happening underneath will be distracting and disorienting.
评论 #42228174 未加载
评论 #42227565 未加载
评论 #42226118 未加载
评论 #42227501 未加载
评论 #42238570 未加载
评论 #42228112 未加载
评论 #42226107 未加载
评论 #42229480 未加载
评论 #42226181 未加载
Karliss6 个月前
Interactive examples are nice, but would have been better if there was a side by comparison or toggle for switching to previous iteration. In most of the cases improvement of each iteration is so subtle I couldn&#x27;t tell a difference.
评论 #42226634 未加载
tln6 个月前
This has like 10 stacked effects, thats about 7 too many except for the most demanding aesthetics.<p>Just use the background color + blur + box shadow or border
评论 #42228617 未加载
评论 #42228834 未加载
评论 #42229399 未加载
评论 #42228510 未加载
bawolff6 个月前
Kind of interesting how we&#x27;ve come full circle. One of the original css demos (for css 1) was for a frosted glass effect <a href="https:&#x2F;&#x2F;meyerweb.com&#x2F;eric&#x2F;css&#x2F;edge&#x2F;complexspiral&#x2F;glassy.html" rel="nofollow">https:&#x2F;&#x2F;meyerweb.com&#x2F;eric&#x2F;css&#x2F;edge&#x2F;complexspiral&#x2F;glassy.html</a>
hirvi746 个月前
Quite impressive to be honest. I always enjoy seeing how creative and powerful CSS can be.<p>Though, I feel like there is some level of understanding of HTML&#x2F;CSS that I will never be able to grasp -- like this demonstration. This person is out here making frosted windows, and I can&#x27;t even center a div.
评论 #42229412 未加载
gyan6 个月前
Not quite frosted, but I went for a glass pane effect on the sidebar at <a href="https:&#x2F;&#x2F;www.gyan.dev&#x2F;ffmpeg&#x2F;builds&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.gyan.dev&#x2F;ffmpeg&#x2F;builds&#x2F;</a>
评论 #42226915 未加载
tyleo6 个月前
Author here! Happy to answer any questions.
评论 #42225879 未加载
评论 #42226826 未加载
评论 #42226623 未加载
评论 #42225803 未加载
评论 #42230010 未加载
deskr6 个月前
Nice. I struggle though to compare the differences. I would find it easier to have one demo and a dropdown which I can select which example I&#x27;m looking at.
评论 #42230363 未加载
评论 #42228004 未加载
Eduard6 个月前
physically wrong, as it only incorporates the pixels directly behind the glass. Noticeable with the upper few rows overexaggerating the cropped background pixels.<p>This results in flickering when vertically scrolling over abrupt BG color borders , eg noticeable on mobile browser Twitter UI
评论 #42227569 未加载
KodingKitty6 个月前
If you are into glass UI, you might enjoy this one inspired by visionOS and done with Tailwind CSS. Click on the &quot;show windows&quot; button in the upper left corner. Works on mobile, but definitely better on larger screens. <a href="https:&#x2F;&#x2F;www.kodingkitty.com&#x2F;blog&#x2F;kitty-os&#x2F;#the-widget" rel="nofollow">https:&#x2F;&#x2F;www.kodingkitty.com&#x2F;blog&#x2F;kitty-os&#x2F;#the-widget</a>
voidfunc6 个月前
I haven&#x27;t done HTML or CSS since HTML4 and CSS2 were cutting edge. This kind of stuff blows my mind now. Very cool, too bad frontend is arcanine magic these days because I don&#x27;t have time to learn all this anymore.
评论 #42226311 未加载
Ecco6 个月前
I&#x27;m pretty sure there is no subsurface scattering in frosted glass. Indeed frosted glass is just regular glass with a frosted surface. Below the surface, it&#x27;s just pure glass, which does not scatter light.
评论 #42226037 未加载
评论 #42226013 未加载
geon6 个月前
I like adding a noise texture [1] to give a grainer result [2].<p>[1] <a href="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;geon&#x2F;estimator&#x2F;refs&#x2F;heads&#x2F;master&#x2F;client&#x2F;css&#x2F;noise-3percent.png" rel="nofollow">https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;geon&#x2F;estimator&#x2F;refs&#x2F;heads&#x2F;...</a> [2] <a href="https:&#x2F;&#x2F;camo.githubusercontent.com&#x2F;57cf0972c6f6d48c19d969f23bb197ef76d2614caf9754594ba973cc9fd95d4e&#x2F;687474703a2f2f67656f6e2e6769746875622e696f2f657374696d61746f722f6769746875622d726561646d652d696d616765732f656469742d6469616c6f672e6a7067" rel="nofollow">https:&#x2F;&#x2F;camo.githubusercontent.com&#x2F;57cf0972c6f6d48c19d969f23...</a>
评论 #42231554 未加载
sam0x176 个月前
The frosted glass effect was a huge eye-opener for me the first I saw it in the early 2000s. At the time I thought PNG-based translucency was the be-all-end-all of GUI design and nothing would ever trump it. I genuinely believed there was no UI effect you could not create by simply adding an alpha channel and allowing for translucency and layers overlaying on top of each other. Drop-shadows, glass effects, all of it can be fully done by PNGs that overlay on top of each other. Then I saw a frosted glass &#x2F; background effect and I was awestruck, here was a UI effect that wasn&#x27;t simply overlaying pixels over pixels.... I&#x27;ll never forget that moment<p>spoiler: and so, I left frontend :D
scq6 个月前
Many game UIs are built using HTML&#x2F;CSS under the hood, so it has come full circle!<p><a href="https:&#x2F;&#x2F;coherent-labs.com&#x2F;products&#x2F;coherent-gameface&#x2F;" rel="nofollow">https:&#x2F;&#x2F;coherent-labs.com&#x2F;products&#x2F;coherent-gameface&#x2F;</a>
评论 #42226015 未加载
评论 #42225873 未加载
评论 #42225913 未加载
评论 #42227928 未加载
评论 #42227225 未加载
alexkearns6 个月前
I used a similar technique to create glass-like panels with my online timeline maker (<a href="https:&#x2F;&#x2F;www.chronoflotimeline.com" rel="nofollow">https:&#x2F;&#x2F;www.chronoflotimeline.com</a>). You can see an example timeline with glass-like panels here: <a href="https:&#x2F;&#x2F;www.chronoflotimeline.com&#x2F;timeline&#x2F;shared&#x2F;3118&#x2F;Home-Page-Timeline&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.chronoflotimeline.com&#x2F;timeline&#x2F;shared&#x2F;3118&#x2F;Home-...</a>
评论 #42228566 未加载
nedt6 个月前
Over 20 years ago Eric Meyer had a glass background done with CSS1 with a bit more texture but way less code <a href="https:&#x2F;&#x2F;meyerweb.com&#x2F;eric&#x2F;css&#x2F;edge&#x2F;complexspiral&#x2F;glassy.html" rel="nofollow">https:&#x2F;&#x2F;meyerweb.com&#x2F;eric&#x2F;css&#x2F;edge&#x2F;complexspiral&#x2F;glassy.html</a> If for nothing else those old things on css&#x2F;edge could at least be used as inspiration.
评论 #42230547 未加载
Eric_WVGG6 个月前
I was grappling with background-attachment: fixed in iOS devices just last week… caniuse.net indicated that it’s supported now, but that is very much still not the case.<p>I think I’ve finally cracked why it’s not supported. The official line is that it’s “too expensive” on the cpu, but that doesn’t hold water when single-core performance of iPhones regularly outpaces Macs.<p>iOS Safari does one extra “abstraction” phase of an entire web page that allows for instant pinching and zooming of web pages. In order to get background-attachment: fixed working under such a paradigm, you would need to not only calculate where the background image is relative to the viewport, but also the size and placement of a zoomed document in real time. And on top of that, the browser designers would need to make some kind of decision on what a coherent implementation of the feature would even do under such circumstances.<p>I wish that iOS had a way to just turn off this extra abstraction in CSS altogether. It was a fine crib before responsive design was a thing, but for some pages, it just causes problems now. It’s not needed “everywhere” on the web any more than it’s necessary in all iOS apps.
评论 #42230341 未加载
评论 #42229313 未加载
评论 #42230358 未加载
mkbosmans6 个月前
Do browsers really use a box filter to approximate a gaussian blur? That seems implausible to me, as they produce pretty different looking blurs.
评论 #42227211 未加载
评论 #42228057 未加载
gbolcer6 个月前
This is really cool and thanks for sharing the details. Now I want to see coke bottle glass effects. :-) <a href="https:&#x2F;&#x2F;www.nathanallan.com&#x2F;product&#x2F;bottle-base-textured-glass&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.nathanallan.com&#x2F;product&#x2F;bottle-base-textured-gla...</a>
评论 #42228597 未加载
chamomeal6 个月前
Looks awesome!!<p>On a semi-related note, the best in-game UI I’ve ever seen was in Prey 2017. The little computers and terminals you interact with look <i>amazing</i>, and every single I time I used one I was spellbound. The huge amount of effort that goes into small details in games in particular is incredible.
timvisee6 个月前
I always feel rendering such blurred panes takes quite a performance hit. Do we have any numbers on this?<p>I might just be old - when this was done on the CPU.
flavaz6 个月前
Great inspiration, thanks. Been working on something that has gamified elements, and the pin has dropped that this style might be perfect
kartofelek0076 个月前
<a href="https:&#x2F;&#x2F;codepen.io&#x2F;kartofelek007&#x2F;pen&#x2F;MWxxqVb" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;kartofelek007&#x2F;pen&#x2F;MWxxqVb</a> with svg filters you will get a better effect
评论 #42267495 未加载
butterNaN6 个月前
I have this almost everywhere on my KDE Plasma desktop, with the help of Kvantum* (their debian dependencies seem to be broken - I had to build it from source in a container). Maybe it won&#x27;t last for long, but I absolutely love the aesthetics.<p>* <a href="https:&#x2F;&#x2F;github.com&#x2F;tsujan&#x2F;Kvantum">https:&#x2F;&#x2F;github.com&#x2F;tsujan&#x2F;Kvantum</a>
webstrand6 个月前
I didn&#x27;t like how the highlighted edge of the glass didn&#x27;t change as the pane was moved around, here&#x27;s a way to fix that: &lt;<a href="https:&#x2F;&#x2F;codepen.io&#x2F;webstrand&#x2F;pen&#x2F;OPLLBZN" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;webstrand&#x2F;pen&#x2F;OPLLBZN</a>&gt;
genezeta6 个月前
Just so you know...<p>I&#x27;m not seeing the &quot;background-attachment fixed&quot; working <i>at all</i>. Not the CSS and neither the JavaScript solution. The <i>rays</i> stay static, detached from the moving div just as they were before applying that code.<p>In both Firefox and Vivaldi, on Windows.
评论 #42235805 未加载
binarymax6 个月前
This is beautiful, and the thing that most surprised me is that it didn&#x27;t fire up my fan and roast my machine. I&#x27;m used to browser visuals like these just grinding away - but this was very smooth and performant. Thanks for sharing!
评论 #42232335 未加载
lovegrenoble6 个月前
Nice effect, nice article too
ninju6 个月前
Small typo<p>In the *Dynamic Light* section the first time `background-attachment` is spelled it has too many &#x27;e&#x27;s
kfarr6 个月前
I personally like this aesthetic and think it looks great. I also don&#x27;t think the performance questions raised in this thread are material given modern user device capabilities.<p>However, the contrast between the glass background and foreground is dependent on background content by design, which is a serious issue for complying with various accessibility guidelines. For enterprise apps if you want to pass the various accessibility reviews it needs to be a user preference to disable this at least, or just don&#x27;t use this technique to guarantee pass for contrast related questions.
michelreij6 个月前
Beautiful. And excellent writing!
jp10166 个月前
i have created a library for generating frosted glass effect, this looks so good on icons.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;JP1016&#x2F;react-icon-blur">https:&#x2F;&#x2F;github.com&#x2F;JP1016&#x2F;react-icon-blur</a>
Animats6 个月前
Aw. Kind of like Windows 7 Aero theme.