crolling shadows
Here’s an old idea, but recreated with pure CSS.
Originally, I had an extra wrapper and two extra pseudo-elements on it. Later I decided to rewrite the code and to use just a single element (by using radial gradients).
While this method is simple, there are some limitations:
- the background must be solidGo to a sidenote
- there are some positioning issues
But in most regards this method is rather bulletproof.
If you replace the CSS-gradients with simple images, this method could work in IE. (It might need a few more small fixes; I didn’t check.)
Enjoy!
Update: Lea Verou updated this experiment using the background-attachment: local
. Read about it in her post.
- Not enough content to scroll
- 2
- 3
- 4
- 5
- Ah! Scroll below!
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- The end!
- No shadow there.
Let me know what you think about this article on Mastodon!
Published on with tags: #Experiment #Practical #CSS