34 Scrolling Hints

by Richard Hunter

HTML

<ul>
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
  <li>delta</li>
  <li>epsilon</li>
  <li>gamma</li>
  <li>delta</li>
  <li>epsilon</li>
    <li>delta</li>
  <li>epsilon</li>
  <li>gamma</li>
  <li>delta</li>
  <li>epsilon</li>
</ul>

CSS

li {
  list-style: none;
  
}
ul {
  padding: 0;
  overflow: auto;
  width: 10em;
  height: 8em;
  padding: .3em 5.em;
  background: 
     linear-gradient(white 30%, transparent), 
     radial-gradient(at 50% 0, rgba(0, 0, 0, 0.2), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100% 15px;
  background-attachment: local, scroll;
}