Table Shadows and Falling Sand
Hey friends,
"Maycember" is almost upon us! 😲 Buckle up, everyone!
Thinking Too Hard 🤔
So let's say you have a table. It's a BIIIIIG table, and not one that will split apart nicely for mobile with a technique like the good 'ole tablesaw.
So you overflow: auto it to allow it to scroll horizontally on mobile, but how do you indicate to the mobile user that, hey, there's a lot more content over THERE?
Well, I found a (remarkably old yet still clever) technique the other week that helps solve this with no JavaScript required. It involves 4 gradients, and smart use of the background-attachment property.
Two of the gradients are 'covers' and they're attached to the 'true' edges of the table. If there's no overflow, the covers will... well... COVER everything.
The other two gradients are shadows, that are attached to the scroll-box boundaries. As soon as the table no longer fits and busts out of the side, the covers sticks to the true edge (which is no longer visible) and the shadows on the scroll edge appears to indicate additional content.
Pretty neat, right?
The only downside is that this technique works best on solid colors, and any backgrounds you use on table cells or rows will cover up the gradients (unless you use a translucent color).
Check it out in action here: https://codepen.io/nathanlong/pen/WbbXvGo
Interesting Web Bits 🍿
Web Stuff
- A fascinating walkthrough of building a custom shader.
- The Webby Awards announced their 2025 winners ... and there are QUITE A FEW categories...
- Rachel Andrew is working on multi-column block direction wrapping.
- What do you do when a tech giant forks your code?. The discussion that contains an apology from Microsoft is also interesting. Licenses are important.
Other Stuff
- Play with over 500 types of materials in this falling sand simulator.
- Not completely the point of this article, but I'm still on the fence for AI writing emails, even if I train it to sound like me... Human connections are important and hard enough to maintain on their own without ceding autonomy.