Skip to content

Instantly share code, notes, and snippets.

@while0pass

while0pass/dabblet.css

Forked from LeaVerou/dabblet.css
Created April 15, 2013 08:14
Show Gist options
  • Save while0pass/5386626 to your computer and use it in GitHub Desktop.
Save while0pass/5386626 to your computer and use it in GitHub Desktop.
Download ZIP
Scrolling shadows by @kizmarh and @LeaVerou
Raw
dabblet.css
/**
* Scrolling shadows
* by @kizmarh and @leaverou
* Only works in browsers supporting background-attachment: local; & CSS gradients
* Degrades gracefully
*/
html { background: white; }
.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background: white no-repeat;
background-image:
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%),
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0));
background-position: 0 0, 0 100%, 0 0, 0 100%;
background-size: 100% 30px, 100% 30px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
}
Raw
dabblet.html
<h1>CSS-only shadow-scrolling effect.</h1>
<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>
<div class="scrollbox">
<ul>
<li>Ah! Scroll below!</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment