What is this crazy @element syntax? It works beautifully for me in Firefox Nightly, but MDN has never heard of @element, and Codepen says there’s no CSS pre-processor being used.
The included JS libraries include something called EQCSS: http://elementqueries.com/
Check out the website: http://elementqueries.com for a better idea of what it does (with code samples and demos)
This is really smart! Personally, I would make the shadow a bit more subtle but this demonstrates the technique wonderfully. Also, though I don’t know if this is possible in pure CSS, it would be rad to hide the shadow when you scroll all the way to the right. And to show a shadow on the left of the user has scrolled right.
I believe the same technique could be used, the difference between this demo and the one you describe is how crazy the JS math would be :D
Right now it’s asking ‘Is the scroll width wider than the rendered width?’, and to include functionality like you’re talking about it would need to be something like: ‘Is the scroll width wider than the rendered width plus the current scroll position?’