Skip to content

Instantly share code, notes, and snippets.

@gastonambrogi

gastonambrogi/index.html

Forked from joshuakemmerling/index.html
Created August 13, 2019 20:11
Show Gist options
  • Save gastonambrogi/9b513e2ecb11444019b1af2aa852fdb1 to your computer and use it in GitHub Desktop.
Save gastonambrogi/9b513e2ecb11444019b1af2aa852fdb1 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS horizontal scrolling shadows
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background:
linear-gradient(90deg, white 0%, rgba(255,255,255,0)),
linear-gradient(-90deg, white 0%, rgba(255,255,255,0)) 100% 0,
radial-gradient(
farthest-side at 0% 50%,
rgba(0,0,0,.2),
rgba(0,0,0,0)
),
radial-gradient(
farthest-side at 100% 50%,
rgba(0,0,0,.2),
rgba(0,0,0,0)
) 100% 0%;
background-repeat: no-repeat;
background-color: #fff;
background-size: 100px 137px, 100px 137px, 14px 137px, 14px 137px;
background-attachment: local, local, scroll, scroll;
}
.scrollbox ul { width: 1000px; }
</style>
</head>
<body>
<div class="scrollbox">
<ul>
<li>Not enough content to scroll</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment