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

Revisions

  1. @LeaVerou LeaVerou revised this gist Feb 24, 2013. 2 changed files with 10 additions and 4 deletions.
    10 changes: 9 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -23,10 +23,18 @@ html {
    /* Shadows */
    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)) 0 100%;
    background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
    }
    }
    4 changes: 1 addition & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,6 +44,4 @@ <h1>CSS-only shadow-scrolling effect.</h1>
    <li>The end!</li>
    <li>No shadow there.</li>
    </ul>
    </div>


    </div>
  2. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -17,8 +17,8 @@ html {

    background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)) local,
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100% local,
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

    /* Shadows */
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
  3. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -26,4 +26,7 @@ html {
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
    }
  4. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,10 @@
    * Degrades gracefully
    */

    html { background: white; }
    html {
    background: white;
    font: 120% sans-serif;
    }

    .scrollbox {
    overflow: auto;
    @@ -22,5 +25,5 @@ html { background: white; }
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 30px, 100% 30px, 100% 14px, 100% 14px;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    }
  5. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 6 additions and 7 deletions.
    13 changes: 6 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,16 +12,15 @@ html { background: white; }
    max-height: 200px;
    margin: 50px auto;

    background: white no-repeat;
    background-image:
    background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%),
    linear-gradient(white 30%, rgba(255,255,255,0)) local,
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100% local,

    /* Shadows */
    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%;
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 30px, 100% 30px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
    }
  6. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -14,9 +14,11 @@ html { background: white; }

    background: white no-repeat;
    background-image:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%),


    /* Shadows */
    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%;
  7. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    /**
    * Scrolling shadows
    * by @kizmarh and @leaverou
    * Scrolling shadows by @kizmarh and @leaverou
    * Only works in browsers supporting background-attachment: local; & CSS gradients
    * Degrades gracefully
    */
  8. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,8 @@
    /**
    * Scrolling shadows
    * by @kizmarh and @leaverou
    * Only works in browsers supporting background-attachment: local
    * Only works in browsers supporting background-attachment: local; & CSS gradients
    * Degrades gracefully
    */

    html { background: white; }
  9. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 2 additions and 9 deletions.
    11 changes: 2 additions & 9 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,22 +4,15 @@
    * Only works in browsers supporting background-attachment: local
    */

    html {
    background: #FFF;
    }
    html { background: white; }

    .scrollbox {
    position: relative;
    z-index: 1;

    overflow: auto;

    width: 200px;
    max-height: 200px;
    margin: 50px auto;

    background: #FFF
    no-repeat;
    background: white no-repeat;
    background-image:
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%),
  10. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    /**
    * Scrolling shadows
    * by @kizmarh and @leaverou
    * Only works in browsers supporting background-attachment: local
    */

    html {
    @@ -17,7 +18,8 @@ html {
    max-height: 200px;
    margin: 50px auto;

    background: #FFF no-repeat;
    background: #FFF
    no-repeat;
    background-image:
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%),
  11. @LeaVerou LeaVerou revised this gist Apr 22, 2012. 1 changed file with 11 additions and 21 deletions.
    32 changes: 11 additions & 21 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,7 @@
    /* Scrolling shadows by @kizmarh */
    /**
    * Scrolling shadows
    * by @kizmarh and @leaverou
    */

    html {
    background: #FFF;
    @@ -16,25 +19,12 @@ html {

    background: #FFF no-repeat;
    background-image:
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-position: 0 0, 0 100%;
    background-size: 100% 14px;
    }
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%),

    .scrollbox:before,
    .scrollbox:after {
    content: "";
    position: relative;
    z-index: -1;

    display: block;

    height: 30px;
    margin: 0 0 -30px;
    background: linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
    }
    .scrollbox:after {
    margin: -30px 0 0;
    background: linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
    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;
    }
  12. @kizu kizu revised this gist Apr 20, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,9 @@
    /* Scrolling shadows by @kizmarh */

    html {
    background: #FFF;
    }

    .scrollbox {
    position: relative;
    z-index: 1;
  13. @kizu kizu revised this gist Apr 20, 2012. 1 changed file with 2 additions and 6 deletions.
    8 changes: 2 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -11,13 +11,9 @@
    margin: 50px auto;

    background: #FFF no-repeat;
    background-image:
    -moz-radial-gradient(50% 0,farthest-side,rgba(0,0,0,0.2),rgba(0,0,0,0)),
    -moz-radial-gradient(50% 100%,farthest-side,rgba(0,0,0,0.2),rgba(0,0,0,0));

    background-image:
    radial-gradient(top,50% 100%,rgba(0,0,0,0.2),rgba(0,0,0,0)),
    radial-gradient(bottom,50% 100%,rgba(0,0,0,0.2),rgba(0,0,0,0));
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-position: 0 0, 0 100%;
    background-size: 100% 14px;
    }
  14. @kizu kizu revised this gist Apr 20, 2012. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,10 @@
    margin: 50px auto;

    background: #FFF no-repeat;
    background-image:
    -moz-radial-gradient(50% 0,farthest-side,rgba(0,0,0,0.2),rgba(0,0,0,0)),
    -moz-radial-gradient(50% 100%,farthest-side,rgba(0,0,0,0.2),rgba(0,0,0,0));

    background-image:
    radial-gradient(top,50% 100%,rgba(0,0,0,0.2),rgba(0,0,0,0)),
    radial-gradient(bottom,50% 100%,rgba(0,0,0,0.2),rgba(0,0,0,0));
    @@ -34,4 +38,3 @@
    margin: -30px 0 0;
    background: linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
    }

  15. @kizu kizu created this gist Apr 20, 2012.
    37 changes: 37 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    /* Scrolling shadows by @kizmarh */

    .scrollbox {
    position: relative;
    z-index: 1;

    overflow: auto;

    width: 200px;
    max-height: 200px;
    margin: 50px auto;

    background: #FFF no-repeat;
    background-image:
    radial-gradient(top,50% 100%,rgba(0,0,0,0.2),rgba(0,0,0,0)),
    radial-gradient(bottom,50% 100%,rgba(0,0,0,0.2),rgba(0,0,0,0));
    background-position: 0 0, 0 100%;
    background-size: 100% 14px;
    }

    .scrollbox:before,
    .scrollbox:after {
    content: "";
    position: relative;
    z-index: -1;

    display: block;

    height: 30px;
    margin: 0 0 -30px;
    background: linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
    }
    .scrollbox:after {
    margin: -30px 0 0;
    background: linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
    }

    49 changes: 49 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    <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>


    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}