Skip to content

Instantly share code, notes, and snippets.

@lagartoflojo

lagartoflojo/scroll-shadow.css

Forked from travismillerweb/scroll-shadow.css
Created October 11, 2017 13:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lagartoflojo/dbec3dc63f94256d369885917f8b4589 to your computer and use it in GitHub Desktop.
Save lagartoflojo/dbec3dc63f94256d369885917f8b4589 to your computer and use it in GitHub Desktop.
Download ZIP
CSS - Google Scroll Shadow
Raw
scroll-shadow.css
/*
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;
@lagartoflojo
Copy link
Author

See also http://lea.verou.me/2012/04/background-attachment-local/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment