10 ms·
So you think you know box shadows?
- anymouse123456 2y agoI love this kind of content. It reminds me of the early aughts when folks were doing a lot more of this stuff for fun.
- merceranthony78 2y agoAmazing. Is it possible to tell how much lag these would cause if used on a production website?
- notpushkin 2y agoA lot. Please don't do this in production.
- ThatUnknownDude 2y agoOk this is really cool
- rikafurude21 2y ago[flagged]
- Hard_Space 2y agoSince this is a Reddit-style comment, have to say that username checks out.
- rikafurude21 2y agoYour reply is quite literally a reddit meme, one of the more cringy ones too. Whats your point?
- Hard_Space 2y agoWas replying in the spirit of OP.
- lpapez 2y ago[dead]
- deleted 2y ago[deleted]
- TeMPOraL 2y agoCome on. It's thanks to articles like these I can finally have LLM write all those bullshit CSS hacks for me, and I even get to keep rejecting its commits until it gets it right! (Though honestly, right now, getting GPT-4o to do responsive layout is an exercise in frustration equivalent to doing it myself.)
- bboygravity 2y agoHint: Claude 3.5 sonnet
- paulirish 2y agoSeriously fun exploration. > Layering. That is an important word. Layering is also the key to the (silly but also sometimes good-looking) effects from my text shadow project from 14yrs ago: https://paulirish.github.io/mothereffingtextshadow/ https://paulirish.github.io/mothereffingtextshadow/
- rustystump 2y ago<3
- sufehmi 2y agoWas confused because everything moved in 2 seconds per frame on M2 Firefox. Switched to Chrome - suddenly everything is butter smooth. Congrats on an article very well done!
- breck 2y ago> Layering. That is an important word. It's almost like this post has many layers to it, and that it's not really about box shadows.
- cchance 2y agoHe said it might melt your processor... but on a macbook m3 in arc runs great, like every one of those was amazing.
- chuckadams 2y agoIt's butter on my M1 Air too, in Chrome and Firefox. Surprisingly, it's a slideshow on Safari.
- dahart 2y agoOn Safari iPad, I lose the ability to scroll or do anything somewhere in the middle of the article.
- labster 2y agoHuh, I read the whole article and interacted with all the inline examples on my iPhone SE/2.
- tux3 2y agoEven on a 7 year old first gen AMD, it's smooth as butter. Looks like Stylo and Webrender doing a great job?
- deleted 2y ago[deleted]
- magnio 2y agoMaybe the author tests it on some old device with outdated graphics driver, because they all run smoothly on my 5 yo Android.
- tetris11 2y agoChiming in with my Samsung J3 2016, it ran pretty well here too
- layer8 2y ago
- adrianpluis 2y agoWell done with writing your experience.
- ctippett 2y agoI'm embarrassed to admit it took until the final paragraph before realising that 'gypity' is a reference to Chat GPT.
- noqc 2y agoI took until here.
- fitsumbelay 2y agosame
- fitsumbelay 2y agoreally curious why I got downvoted 3 times for my reply, but whatever ...
- p0seidon 2y agosame
- zarathustreal 2y agoHmm.. I must be even further out of the loop than you, why would that be embarrassing?
- hnbad 2y agoIt isn't. They were being self-deprecating.
- zarathustreal 2y agoIf it isn’t embarrassing then it’s not self-deprecation, it’s just virtue signaling humility
- jbritton 2y agoPrimeagen YouTube channel lingo.
- sunnyps 2y ago> However, using a transparent color significantly slowed down the number that can be drawn too which doesn't make as much sense to me. I'd imagine that with hardware today transparency should be somewhat free. That's because transparency limits how you can batch draws on the GPU. With opaque draws, you can use the depth buffer and draw in any order you like e.g. maximizing batching. With transparency, you need to draw things in the right order for blending to work (painters order).
- amelius 2y agoCan't you mathematically work out how to change the colors/opacity to rearrange the job?
- Rapzid 2y agoHaving that knowledge sounds just as expensive if the operations aren't commutative.
- deleted 2y ago[deleted]
- amelius 2y agoYeah, somehow between comments I forgot this was about shadows and I was thinking more about drawing polygons. In that case, you can break up the polygons and work out the colors for each of the (theoretically 2^N) regions of overlap.
- klysm 2y agoI think there’s still a dependency graph
- Cloudef 2y agoGPUs also do not like overdraw, so it's generally good idea to avoid having many transparent elements on top of each other, its also the reason why drawing more triangles vs. transparent texture is generally better.
- yesimahuman 2y ago> It also turns out that some smart people figured out maths hacks to draw rounded boxes for super cheap which UI peeps love because with this hack boxes can be so round as to appear as circles Any references to learn more about these hacks?
- pmhpereira 2y agoProbably signed distance fields (SDF).
- leecommamichael 2y agoSome historic articles on software rendering (the original Bill Atkinson stuff) https://www.folklore.org/Round_Rects_Are_Everywhere.html https://www.folklore.org/Round_Rects_Are_Everywhere.html http://wg20.criticalcodestudies.com/index.php?p=/discussion/80/code-critique-roundrects-apple-quickdraw-source-code http://wg20.criticalcodestudies.com/index.php?p=/discussion/... A modern 3D accelerated article (using SDF as another commenter suspected) https://mortoray.com/quickly-drawing-a-rounded-rectangle-with-a-gl-shader/ https://mortoray.com/quickly-drawing-a-rounded-rectangle-wit...
- rustystump 2y agoI was thinking SDFs and the Bill stuff at time of writing. Read my mind. Have to add work by Evan Wallace here too as he is a legend. https://madebyevan.com/shaders/fast-rounded-rectangle-shadows/ https://madebyevan.com/shaders/fast-rounded-rectangle-shadow... https://madebyevan.com/webgl-path-tracing/ https://madebyevan.com/webgl-path-tracing/
- recursive 2y agoI'm totally down for some good old fashioned impractical hacking. But just remember, we already have canvas, which can do all this easier, faster, and better.
- egypturnash 2y agoBut with less comedic value. Doing this with nothing but box-shadow is funny, mostly because it is so impractical.
- klysm 2y agoCanvas throws away a lot though, especially w accessibility
- recursive 2y agoReally? I would have guessed that canvas provides pretty much exactly the same accessibility as a UI rendered entirely out of box shadows.
- tkzed49 2y agonow I'm imagining a screen reader reading off the coordinates of 1000 box shadows
- recursive 2y agoYou could probably get it to png encode a canvas and then read it in hex too.
- dmazzoni 2y agoCanvas is better...if you're trying to do something that stays within a fixed-size box.
- kroltan 2y agoCanvas would still be faster even if you used a full-screen box. Just the string concatenation overhead of doing this with box-shadows is insanely wasteful. Which isn't to demerit the hackish creativity of taking one thing and running with it! But if you wanted to do a ball painting effect like that outside this "what if" context, it would be technically irresponsible to do it with box-shadows.
- butz 2y agoBut at the end of the day Firefox and Chrome are still rendering 1px box-shadow differently at 150% browser zoom. Best hopes for Baseline 2025.
- Probiotic6081 2y ago[dead]
- ulf-77723 2y agoReally great work, especially the music synced animation - could as well also be projected in an electro club
- winrid 2y agoThis discussion around adding shadows to window boarders in imgui is also interesting: https://github.com/ocornut/imgui/issues/1329 https://github.com/ocornut/imgui/issues/1329
- nimish 2y agoFull color RGB flip dot display!
- develatio 2y agodgerrells, please add RSS support to your blog!
- rustystump 2y agoDone. Let me know if it works.
- develatio 2y agoSorry for the late reply. I just tried and it works perfectly! Thank you so much!
- kitty444 2y ago[flagged]
- deleted 2y ago[deleted]
- kristopolous 2y agoFor the past 30 years I got good at programming but never really did graphics because I didn't like games. I now view it as a massive oversight and have been trying to catch up for over a year. So hard.
- hackit2 2y agoI did games first, then switched over to crud or simple oracle form programming. I tripled my original game programmer wage overnight.
- eru 2y agoWell, games are seen as fun, so they can attract programmers even with low salaries. Basically the same reason pet veterinaries and teachers and nurses and musicians and artists still attract plenty of candidates despite a comparatively low pay. (Playing games is more fun than working with CRUD apps. But writing games and writing CRUD apps seem about equal in their probability distributions of fun.)
- kristopolous 2y agoMost of this is about the not-so-much-anymore-exotic art of GPU programming. It's becoming important in so many fields. The last thing I want to be is some foot-dragging old windbag who forgot to stay up to date.
- hackit2 2y agoAs long as you get the job done within the estimates and make the client happy you're meeting your employment or job obligations. There is a lot of high paying salaries where people still parse csv jobs, and perform manual reporting with excel files.
- kristopolous 2y agoThis may sound laughable but I'm only in technology to build the future, I don't actually care about the money. Despite the current trend of tech pessimism, I still believe in tomorrow. Gramsci's pessimism of the intellect, optimism of the will can be a tough motivator but I'm trying.
- kitty444 2y ago[flagged]
- fitsumbelay 2y agoMy kind of hackin' Almost like an antichrist to the Josh Comeau posts I've read on the topic https://www.google.com/search?q=josh+comeau+shadows https://www.google.com/search?q=josh+comeau+shadows
- pfannkuchen 2y agoSolid watch for rolling rocks energy.
- deleted 2y ago[deleted]
- efilife 2y agoA great, possibly the greatest article I read this year ended with "your welcome" instead of "you're". Fix asap! Or maybe I didn't get the joke, that's a possibility
- rustystump 2y agonothing to see here...
- efilife 2y agoI'm honored
- coding123 2y agoAs usual, when will we get Quake or Doom ray-trace rendered using box shadow?
- akira2501 2y agoInstead of animating the color balls to music, it'd be nice if my manipulations of the color balls _created_ music.
- tompetry 2y agoThis was awesome
- theturtle32 2y agoTHIS IS ABSOLUTELY EPIC, AND MY FAVORITE KIND OF WEB TECH DEEP DIVE! <3 <3 <3
- SuaveSteve 2y ago>So you think you know ((CSS FEATURE))? Why would I know it? It's CSS!
- tracker1 2y agoLooking at the music visualizations was definitely cool. Really miss the old winamp days when you could play music and just run the visualizer full screen. I wish that streaming audio players did this today.
- valbu 2y agoStill use Winamp (actually WACUP) with Milkdrop visualizations almost every day. But true that streaming audio players are so basic featureless pieces of software.
- deleted 2y ago[deleted]
- moritzwarhier 2y agoYes it's enraging and really telling. AVS and Milkdrop could probably run on a toaster today, I'd guess even WebGL would be enough on a smartphone, laptop or similar device with some kind of GPU. Meanwhile, YTM costs 13€ a month, doesn't have an equalizer, no cross-device sync despite cloud everything... no nothing. Not even gapless album playback. Once upon a time, I signed up to Spotify in order to have a good conscience, because I grew old and didn't want to keep collecting audio files... Then Spotify became worse and worse. For now YTM seems like a better deal, but I still can't even find a free solution to migrate my playlists. Basically, everything went to shit. The only advantage is not having to illegaly download new music after browsing Discogs. The disadvantage is, apart from the odd good recommendation, my interest in discovering new music has vanished. Even new music found on Discogs. But why bother saving songs to playlists when it's all transient anyway? That was my main last straw with Spotify — too many good music disappearing from playlists, and steadily worsening recommendations. With rabbit-holes of totally trash AI-generated "music" in between, that didn't stop unless actively skipping. And YTMs not gonna end any better, I feel. Just a reminder that all music is transient. And maybe to seek regaining enthusiasm by playing music myself, or going out. Streaming really has killed "listening to music" and being excited about it for me, and I don't feel it's purely because of old age. Going to revive my Mp3 collection soon from a backup and download my ~25 records worth listening since 2012 then from Bandcamp instead.
- mediumsmart 2y agoI know not to use them without much thinking involved.