Created
September 23, 2013 18:57
-
-
Save travismillerweb/6675197 to your computer and use it in GitHub Desktop.
CSS - Google Scroll Shadow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Gmail/Google Reader Sidebar Scroll Shadows | |
| ------------------------------------------- | |
| Neat effect that mimics the scroll shadows that appear in the GOogle sitde bar and visually cues users to scroll up or down depending on their position. | |
| Credit goes to Lea Verou for this awesome find. | |
| Source: | |
| Lea's Talk: http://www.youtube.com/watch?v=3ikye7Qc7Ak | |
| Code Source: http://lea.verou.me/more-css-secrets/#slide9 | |
| */ | |
| background: | |
| linear-gradient(white 30%, hsla(0,0%,100%, 0)), | |
| linear-gradient(hsla(0,0%,100%,0) 10px, white 70%) bottom, | |
| radial-gradient(at top, rgba(0,0,0,0.2), transparent 70%), | |
| radial-gradient(at bottom, rgba(0,0,0,0.2), transparent 70%) bottom; | |
| background-repeat:no-repeat; | |
| background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px; | |
| background-attachment:local, local, scroll, scroll; |
Doesn't seem to work in Chrome 70.0.3538.110
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's a horizontal version of this: https://gist.github.com/hellojosh/5270953