1. 4
  1.  

  2. 3

    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.

    1. 3

      The included JS libraries include something called EQCSS: http://elementqueries.com/

      1. 2

        Hey @Screwtape, it’s a non-standard syntax for extending what CSS can do to include scoped styles, element queries, new selectors, new element-based units, and some really fun ways to write “functional CSS” using JavaScript to do the heavy lifting!

        Check out the website: http://elementqueries.com for a better idea of what it does (with code samples and demos)

      2. 2

        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.

        1. 1

          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?’