Skip to content

Instantly share code, notes, and snippets.

@kazu2012

kazu2012/dabblet.css

Created September 4, 2012 12:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kazu2012/3620935 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kazu2012/3620935 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kazu2012 revised this gist Sep 4, 2012. No changes.
  2. kazu2012 revised this gist Sep 4, 2012. No changes.
  3. kazu2012 revised this gist Sep 4, 2012. No changes.
  4. Ana Tudor revised this gist Aug 8, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"separate","fontsize":"80","seethrough":"1","prefixfree":"1","page":"result"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  5. Ana Tudor revised this gist Aug 8, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"separate","fontsize":"80","seethrough":"1","prefixfree":"1","page":"result"}
  6. Ana Tudor revised this gist Aug 8, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -142,12 +142,12 @@ code {
    background-position: 0 100%;
    }
    .p7 {
    background: linear-gradient(-45deg, transparent 65%, seashell 65%)
    background: linear-gradient(-45deg, transparent 67%, seashell 67%)
    -13px 50%,
    linear-gradient(45deg, transparent 65%, seashell 65%)
    linear-gradient(45deg, transparent 67%, seashell 67%)
    -13px 50%,
    linear-gradient(-45deg, seashell 35%, transparent 35%) 0 50%,
    seashell linear-gradient(45deg, seashell 35%, saddlebrown 35%) 0 50%;
    linear-gradient(-45deg, seashell 33%, transparent 33%) 0 50%,
    seashell linear-gradient(45deg, seashell 33%, saddlebrown 33%) 0 50%;
    background-repeat: repeat-x;
    background-size: 26px 26px;
    transition: 3.5s cubic-bezier(0, 3, 1, -2);
  7. Ana Tudor revised this gist Aug 8, 2012. 2 changed files with 15 additions and 17 deletions.
    30 changes: 14 additions & 16 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -58,17 +58,17 @@ code {
    background-position: -98px 0;
    }
    .p1 {
    background: linear-gradient(-30deg, midnightblue 32%, transparent 32%)
    13px 0,
    linear-gradient(-150deg, midnightblue 32%, transparent 32%)
    -13px 0,
    linear-gradient(150deg, midnightblue 32%, transparent 32%),
    linear-gradient(30deg, midnightblue 32%, greenyellow 32%);
    background: linear-gradient(-45deg, transparent 65%, midnightblue 65%)
    -13px 0,
    linear-gradient(45deg, transparent 65%, midnightblue 65%)
    -13px 0,
    linear-gradient(-45deg, midnightblue 35%, transparent 35%),
    linear-gradient(45deg, midnightblue 35%, greenyellow 35%);
    background-size: 26px 26px;
    transition: 2s linear;
    }
    .p1:hover {
    background-position: 208px 0, 182px 0, 195px 0, 195px 0;
    background-position: 182px 0, 182px 0, 195px 0, 195px 0;
    }
    .p2 {
    background: radial-gradient(hotpink, white 70%) no-repeat 0 50%,
    @@ -142,15 +142,13 @@ code {
    background-position: 0 100%;
    }
    .p7 {
    background: linear-gradient(-30deg, seashell 32%, transparent 32%)
    repeat-x 13px 50%,
    linear-gradient(-150deg, seashell 32%, transparent 32%)
    repeat-x -13px 50%,
    linear-gradient(150deg, seashell 32%, transparent 32%)
    repeat-x 0 50%,
    linear-gradient(30deg, seashell 32%, saddlebrown 32%)
    repeat-x 0 50%;
    background-color: seashell;
    background: linear-gradient(-45deg, transparent 65%, seashell 65%)
    -13px 50%,
    linear-gradient(45deg, transparent 65%, seashell 65%)
    -13px 50%,
    linear-gradient(-45deg, seashell 35%, transparent 35%) 0 50%,
    seashell linear-gradient(45deg, seashell 35%, saddlebrown 35%) 0 50%;
    background-repeat: repeat-x;
    background-size: 26px 26px;
    transition: 3.5s cubic-bezier(0, 3, 1, -2);
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"result"}
    {"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
  8. Ana Tudor revised this gist May 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"result"}
  9. Ana Tudor revised this gist May 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -232,7 +232,7 @@ code {
    background-size: 1px 26px, 1px 26px, 1px 26px, 195px 195px;
    }
    .p13 {
    background: linear-gradient(left top, orangered 47%, lemonchiffon 53%)
    background: linear-gradient(left top, orangered 49%, lemonchiffon 51%)
    50% 50%;
    background-size: 195px 156px;
    transition: 2.75s cubic-bezier(0, 3.25, 1, -2.25);
  10. Ana Tudor revised this gist May 24, 2012. 2 changed files with 3 additions and 2 deletions.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -232,7 +232,8 @@ code {
    background-size: 1px 26px, 1px 26px, 1px 26px, 195px 195px;
    }
    .p13 {
    background: linear-gradient(left top, orangered 25%, lemonchiffon 35%);
    background: linear-gradient(left top, orangered 47%, lemonchiffon 53%)
    50% 50%;
    background-size: 195px 156px;
    transition: 2.75s cubic-bezier(0, 3.25, 1, -2.25);
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"result"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  11. Ana Tudor revised this gist May 24, 2012. No changes.
  12. Ana Tudor revised this gist May 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"result"}
  13. Ana Tudor revised this gist May 24, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -232,7 +232,7 @@ code {
    background-size: 1px 26px, 1px 26px, 1px 26px, 195px 195px;
    }
    .p13 {
    background: linear-gradient(left top, orangered 15%, lemonchiffon 35%);
    background: linear-gradient(left top, orangered 25%, lemonchiffon 35%);
    background-size: 195px 156px;
    transition: 2.75s cubic-bezier(0, 3.25, 1, -2.25);
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  14. Ana Tudor revised this gist May 24, 2012. 3 changed files with 13 additions and 5 deletions.
    8 changes: 5 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ code {
    bottom: 0;
    right: 0;
    left: 0;
    padding: 7px 7px 14px;
    padding: 8px 7px 19px;
    display: none;
    position: fixed;
    background: #222;
    @@ -232,8 +232,10 @@ code {
    background-size: 1px 26px, 1px 26px, 1px 26px, 195px 195px;
    }
    .p13 {

    background: linear-gradient(left top, orangered 15%, lemonchiffon 35%);
    background-size: 195px 156px;
    transition: 2.75s cubic-bezier(0, 3.25, 1, -2.25);
    }
    .p13:hover {

    background-size: 195px 390px;
    }
    8 changes: 7 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -98,5 +98,11 @@ <h1>Horizontal bar chart.</h1>
    <code>background-size</code>.
    </div>
    </a>
    <a class="panel p13" href="#"></a>
    <a class="panel p13" href="#">
    <div class="panel-info">
    <h1>Changing angle.</h1>
    Simulated using a bouncing <code>transition</code> on
    <code>background-size</code>.
    </div>
    </a>
    </div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
  15. Ana Tudor revised this gist May 24, 2012. 2 changed files with 4 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    * animated gradient display
    */
    body {
    padding: 0;
    padding: 75px 0;
    font-family: Helvetica;
    font-size: 15px;
    }
    @@ -19,7 +19,7 @@ code {
    .panel {
    width: 195px;
    height: 130px;
    margin: -1px;
    margin: 0 -1px 0 0;
    border: solid 2px lightblue;
    border-radius: 13px;
    display: inline-block;
    @@ -30,7 +30,7 @@ code {
    bottom: 0;
    right: 0;
    left: 0;
    padding: 8px;
    padding: 7px 7px 14px;
    display: none;
    position: fixed;
    background: #222;
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  16. Ana Tudor revised this gist May 24, 2012. 3 changed files with 13 additions and 6 deletions.
    6 changes: 4 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -224,10 +224,12 @@ code {
    linear-gradient(lemonchiffon, orchid) 0 0;
    background-repeat: no-repeat;
    background-size: 91px 26px, 78px 26px, 156px 26px, 195px 195px;
    transition: 1s cubic-bezier(0, .35, 1, .65);
    transition: background-size .85s cubic-bezier(0, .35, 1, .65),
    background-position 1.25s .5s ease-in-out;
    }
    .p12:hover {
    background-position: -91px 15%, -78px 50%, -156px 85%, 0 -65px;
    background-position: -5px 15%, -5px 50%, -5px 85%, 0 -65px;
    background-size: 1px 26px, 1px 26px, 1px 26px, 195px 195px;
    }
    .p13 {

    11 changes: 8 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -90,8 +90,13 @@ <h1>Particles.</h1>
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p12" href="#"></a>
    <a class="panel p12" href="#">
    <div class="panel-info">
    <h1>Horizontal bar chart.</h1>
    Again <code>transition</code> on both
    <code>background-position</code> and
    <code>background-size</code>.
    </div>
    </a>
    <a class="panel p13" href="#"></a>
    <a class="panel p14" href="#"></a>
    <a class="panel p15" href="#"></a>
    </div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
  17. Ana Tudor revised this gist May 24, 2012. 2 changed files with 14 additions and 7 deletions.
    19 changes: 13 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -205,10 +205,11 @@ code {
    background-size: 1px 50px, 26px 26px, 26px 52px, 26px 13px, 26px 39px;
    }
    .p11 {
    background: radial-gradient(deeppink, transparent 16px) no-repeat 20% 100%,
    radial-gradient(gold, transparent 16px) no-repeat 40% 100%,
    radial-gradient(greenyellow, transparent 16px) no-repeat 60% 100%,
    radial-gradient(aqua, transparent 16px) no-repeat 80% 100%;
    background: radial-gradient(deeppink, transparent 16px) 20% 100%,
    radial-gradient(gold, transparent 16px) 40% 100%,
    radial-gradient(greenyellow, transparent 16px) 60% 100%,
    radial-gradient(aqua, transparent 16px) 80% 100%;
    background-repeat: no-repeat;
    background-size: 26px 26px;
    background-color: black;
    transition: 2.5s cubic-bezier(0, 3.25, 1, -2.25);
    @@ -217,10 +218,16 @@ code {
    background-position: 100% 0, 75% 50%, 25% 0, 0 50%;
    }
    .p12 {

    background: linear-gradient(left, lightblue, deeppink) 0 15%,
    linear-gradient(left, lightblue, gold) 0 50%,
    linear-gradient(left, lightblue, greenyellow) 0 85%,
    linear-gradient(lemonchiffon, orchid) 0 0;
    background-repeat: no-repeat;
    background-size: 91px 26px, 78px 26px, 156px 26px, 195px 195px;
    transition: 1s cubic-bezier(0, .35, 1, .65);
    }
    .p12:hover {

    background-position: -91px 15%, -78px 50%, -156px 85%, 0 -65px;
    }
    .p13 {

    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  18. Ana Tudor revised this gist May 24, 2012. No changes.
  19. Ana Tudor revised this gist May 24, 2012. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -68,7 +68,13 @@ <h1>Happy sine wave.</h1>
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p9" href="#"></a>
    <a class="panel p9" href="#">
    <div class="panel-info">
    <h1>Make a tablecloth.</h1>
    Yet another <code>transition</code> on
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p10" href="#">
    <div class="panel-info">
    <h1>Bar chart.</h1>
  20. Ana Tudor revised this gist May 24, 2012. 3 changed files with 22 additions and 3 deletions.
    6 changes: 6 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -222,3 +222,9 @@ code {
    .p12:hover {

    }
    .p13 {

    }
    .p13:hover {

    }
    17 changes: 15 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -69,8 +69,21 @@ <h1>Happy sine wave.</h1>
    </div>
    </a>
    <a class="panel p9" href="#"></a>
    <a class="panel p10" href="#"></a>
    <a class="panel p11" href="#"></a>
    <a class="panel p10" href="#">
    <div class="panel-info">
    <h1>Bar chart.</h1>
    Linear <code>transition</code> on both
    <code>background-position</code> and
    <code>background-size</code>.
    </div>
    </a>
    <a class="panel p11" href="#">
    <div class="panel-info">
    <h1>Particles.</h1>
    Bouncing <code>transition</code> on
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p12" href="#"></a>
    <a class="panel p13" href="#"></a>
    <a class="panel p14" href="#"></a>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
  21. Ana Tudor revised this gist May 24, 2012. 2 changed files with 43 additions and 7 deletions.
    48 changes: 42 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -179,10 +179,46 @@ code {
    background-position: -25% 100%, -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%,
    50% 50%, 60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
    }
    p9 {
    background: radial-gradient(deeppink, white 70%) 20% 100%,
    radial-gradient(gold, white 70%) 40% 100%,
    radial-gradient(greenyellow, white 70%) 60% 100%,
    radial-gradient(aqua, white 70%) 80% 100%;
    background-size: 13px 13px;
    .p9 {
    background: linear-gradient(left, darkcyan 37%, transparent 47%)
    repeat-x -3px 128px,
    linear-gradient(darkcyan 37%, transparent 47%) repeat-y 193px -3px;
    background-size: 13px 135px, 200px 13px;
    transition: .5s ease;
    }
    .p9:hover {
    background-position: -3px 0, 0 -3px;
    }
    .p10 {
    background: linear-gradient(transparent 49%, black 49%,
    black 51%, transparent 51%) repeat-x 0 40px,
    linear-gradient(deeppink, white) no-repeat 26px 49%,
    linear-gradient(gold, white) no-repeat 65px 49%,
    linear-gradient(lemonchiffon, greenyellow) no-repeat 104px 50%,
    linear-gradient(aqua, white) no-repeat 143px 49%;
    background-color: indigo;
    background-size: 1px 50px, 26px 1px, 26px 1px, 26px 1px, 26px 1px;
    transition: .2s linear;
    }
    .p10:hover {
    background-position: 0 40px, 26px 37%, 65px 17%, 104px 55%, 143px 29%;
    background-size: 1px 50px, 26px 26px, 26px 52px, 26px 13px, 26px 39px;
    }
    .p11 {
    background: radial-gradient(deeppink, transparent 16px) no-repeat 20% 100%,
    radial-gradient(gold, transparent 16px) no-repeat 40% 100%,
    radial-gradient(greenyellow, transparent 16px) no-repeat 60% 100%,
    radial-gradient(aqua, transparent 16px) no-repeat 80% 100%;
    background-size: 26px 26px;
    background-color: black;
    transition: 2.5s cubic-bezier(0, 3.25, 1, -2.25);
    }
    .p11:hover {
    background-position: 100% 0, 75% 50%, 25% 0, 0 50%;
    }
    .p12 {

    }
    .p12:hover {

    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  22. Ana Tudor revised this gist May 24, 2012. 3 changed files with 15 additions and 8 deletions.
    7 changes: 7 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -179,3 +179,10 @@ code {
    background-position: -25% 100%, -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%,
    50% 50%, 60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
    }
    p9 {
    background: radial-gradient(deeppink, white 70%) 20% 100%,
    radial-gradient(gold, white 70%) 40% 100%,
    radial-gradient(greenyellow, white 70%) 60% 100%,
    radial-gradient(aqua, white 70%) 80% 100%;
    background-size: 13px 13px;
    }
    14 changes: 7 additions & 7 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -68,11 +68,11 @@ <h1>Happy sine wave.</h1>
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p9" href=""></a>
    <a class="panel p10" href=""></a>
    <a class="panel p11" href=""></a>
    <a class="panel p12" href=""></a>
    <a class="panel p13" href=""></a>
    <a class="panel p14" href=""></a>
    <a class="panel p15" href=""></a>
    <a class="panel p9" href="#"></a>
    <a class="panel p10" href="#"></a>
    <a class="panel p11" href="#"></a>
    <a class="panel p12" href="#"></a>
    <a class="panel p13" href="#"></a>
    <a class="panel p14" href="#"></a>
    <a class="panel p15" href="#"></a>
    </div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
  23. Ana Tudor revised this gist May 23, 2012. No changes.
  24. Ana Tudor revised this gist May 23, 2012. No changes.
  25. Ana Tudor revised this gist May 23, 2012. 3 changed files with 81 additions and 15 deletions.
    15 changes: 13 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,17 @@
    body {
    padding: 0;
    font-family: Helvetica;
    font-size: 15px;
    }
    h1 {
    margin: 0 0 8px;
    border-bottom: solid 1px white;
    font-size: 23px;
    font-style: italic;
    }
    code {
    color: deeppink;
    font-size: 17px;
    }
    .panel {
    width: 195px;
    @@ -15,7 +26,7 @@ body {
    overflow: hidden;
    text-decoration: none;
    }
    .panel:after {
    .panel-info {
    bottom: 0;
    right: 0;
    left: 0;
    @@ -26,7 +37,7 @@ body {
    color: white;
    content: attr(data-inf);
    }
    .panel:hover:after {
    .panel:hover .panel-info {
    display: block;
    }

    79 changes: 67 additions & 12 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,73 @@
    <!-- content to be placed inside <body>…</body> -->
    <p>Hover over the panels to see the effects :)
    <div class="panels">
    <a class="panel p0" href="#"
    data-inf="Rainbow. Uses a bouncing transition on
    <code>background-size</code> and <code>background-position</code>.">
    </a>
    <a class="panel p1" href="#"></a>
    <a class="panel p2" href="#"></a>
    <a class="panel p3" href="#"></a>
    <a class="panel p4" href="#"></a>
    <a class="panel p5" href="#"></a>
    <a class="panel p6" href="#"></a>
    <a class="panel p7" href="#"></a>
    <a class="panel p8" href="#"></a>
    <a class="panel p0" href="#">
    <div class="panel-info">
    <h1>Rainbow.</h1>
    Bouncing <code>transition</code> on
    <code>background-size</code> and
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p1" href="#">
    <div class="panel-info">
    <h1>Sharp waves.</h1> Linear <code>transition</code> on
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p2" href="#">
    <div class="panel-info">
    <h1>Soft discs.</h1>
    Bouncing <code>transition</code> on
    <code>background-position</code> and
    <code>background-size</code>.
    </div>
    </a>
    <a class="panel p3" href="#">
    <div class="panel-info">
    <h1>White to...</h1>
    Actually just a <code>transition</code> on the
    <code>background-color</code> underneath the partially
    transparent <code>linear-gradient</code>.
    </div>
    </a>
    <a class="panel p4" href="#">
    <div class="panel-info">
    <h1>Crash into Jupiter.</h1>
    Just a <code>transition</code> on
    <code>background-size</code>
    (scaling, aspect ratio preserved).
    </div>
    </a>
    <a class="panel p5" href="#">
    <div class="panel-info">
    <h1>Stripes to ropes.</h1>
    Another <code>transition</code> on
    <code>background-size</code>
    (distortion, aspect ratio not preserved).
    </div>
    </a>
    <a class="panel p6" href="#">
    <div class="panel-info">
    <h1>Stretched rainbow.</h1>
    Bouncing <code>transition</code> on
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p7" href="#">
    <div class="panel-info">
    <h1>T-Rex teeth.</h1>
    Bouncing <code>transition</code> on
    <code>background-size</code>.
    </div>
    </a>
    <a class="panel p8" href="#">
    <div class="panel-info">
    <h1>Happy sine wave.</h1>
    Another <code>transition</code> on
    <code>background-position</code>.
    </div>
    </a>
    <a class="panel p9" href=""></a>
    <a class="panel p10" href=""></a>
    <a class="panel p11" href=""></a>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  26. Ana Tudor revised this gist May 23, 2012. 3 changed files with 19 additions and 4 deletions.
    16 changes: 14 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,6 @@
    */
    body {
    padding: 0;
    }
    p {
    font-family: Helvetica;
    }
    .panel {
    @@ -17,6 +15,20 @@ p {
    overflow: hidden;
    text-decoration: none;
    }
    .panel:after {
    bottom: 0;
    right: 0;
    left: 0;
    padding: 8px;
    display: none;
    position: fixed;
    background: #222;
    color: white;
    content: attr(data-inf);
    }
    .panel:hover:after {
    display: block;
    }

    .p0 {
    background: linear-gradient(left,
    5 changes: 4 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,10 @@
    <!-- content to be placed inside <body>…</body> -->
    <p>Hover over the panels to see the effects :)
    <div class="panels">
    <a class="panel p0" href="#"></a>
    <a class="panel p0" href="#"
    data-inf="Rainbow. Uses a bouncing transition on
    <code>background-size</code> and <code>background-position</code>.">
    </a>
    <a class="panel p1" href="#"></a>
    <a class="panel p2" href="#"></a>
    <a class="panel p3" href="#"></a>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
  27. Ana Tudor revised this gist May 23, 2012. 2 changed files with 15 additions and 17 deletions.
    30 changes: 14 additions & 16 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    * animated gradient display
    */
    body {
    padding: 26px 0 0;
    padding: 0;
    }
    p {
    font-family: Helvetica;
    @@ -18,7 +18,6 @@ p {
    text-decoration: none;
    }

    /* FIRST ROW */
    .p0 {
    background: linear-gradient(left,
    hsl(0, 100%, 80%) 0%, hsl(35, 100%, 80%) 10%,
    @@ -61,7 +60,6 @@ p {
    background-size: 25px 25px;
    }

    /* SECOND ROW */
    .p3 {
    background: linear-gradient(left, white, transparent);
    background-color: darkorange;
    @@ -137,22 +135,22 @@ p {
    background-size: 26px 260px;
    }
    .p8 {
    background: radial-gradient(hsl(359, 100%, 80%) 50%, black 80%) -10% 80%,
    radial-gradient(hsl(0, 100%, 80%) 50%, black 80%) 0 50%,
    radial-gradient(hsl(35, 100%, 80%) 50%, black 80%) 10% 20%,
    radial-gradient(hsl(71, 100%, 80%) 50%, black 80%) 25% 0,
    radial-gradient(hsl(107, 100%, 80%) 50%, black 80%) 40% 20%,
    radial-gradient(hsl(143, 100%, 80%) 50%, black 80%) 50% 50%,
    radial-gradient(hsl(179, 100%, 80%) 50%, black 80%) 60% 80%,
    radial-gradient(hsl(215, 100%, 80%) 50%, black 80%) 75% 100%,
    radial-gradient(hsl(251, 100%, 80%) 50%, black 80%) 90% 80%,
    radial-gradient(hsl(287, 100%, 80%) 50%, black 80%) 100% 50%,
    radial-gradient(hsl(323, 100%, 80%) 50%, black 80%) 110% 20%,
    radial-gradient(hsl(359, 100%, 80%) 50%, black 80%) 125% 0;
    background: radial-gradient(hsl(359, 100%, 80%) 20%, black 70%) -10% 80%,
    radial-gradient(hsl(0, 100%, 80%) 20%, black 70%) 0 50%,
    radial-gradient(hsl(35, 100%, 80%) 20%, black 70%) 10% 20%,
    radial-gradient(hsl(71, 100%, 80%) 20%, black 70%) 25% 0,
    radial-gradient(hsl(107, 100%, 80%) 20%, black 70%) 40% 20%,
    radial-gradient(hsl(143, 100%, 80%) 20%, black 70%) 50% 50%,
    radial-gradient(hsl(179, 100%, 80%) 20%, black 70%) 60% 80%,
    radial-gradient(hsl(215, 100%, 80%) 20%, black 70%) 75% 100%,
    radial-gradient(hsl(251, 100%, 80%) 20%, black 70%) 90% 80%,
    radial-gradient(hsl(287, 100%, 80%) 20%, black 70%) 100% 50%,
    radial-gradient(hsl(323, 100%, 80%) 20%, black 70%) 110% 20%,
    radial-gradient(hsl(359, 100%, 80%) 20%, black 70%) 125% 0;
    background-color: black;
    background-repeat: no-repeat;
    background-size: 26px 26px;
    transition: .3s cubic-bezier(0, .25, 1, .75);
    transition: .3s cubic-bezier(0, 0.25, 1, .75);
    }
    .p8:hover {
    background-position: -25% 100%, -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%,
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
  28. Ana Tudor revised this gist May 23, 2012. 1 changed file with 16 additions and 25 deletions.
    41 changes: 16 additions & 25 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -137,33 +137,24 @@ p {
    background-size: 26px 260px;
    }
    .p8 {
    background: radial-gradient(hsl(0, 100%, 80%) 50%, black 80%)
    no-repeat 0 50%,
    radial-gradient(hsl(35, 100%, 80%) 50%, black 80%)
    no-repeat 10% 20%,
    radial-gradient(hsl(71, 100%, 80%) 50%, black 80%)
    no-repeat 25% 0,
    radial-gradient(hsl(107, 100%, 80%) 50%, black 80%)
    no-repeat 40% 20%,
    radial-gradient(hsl(143, 100%, 80%) 50%, black 80%)
    no-repeat 50% 50%,
    radial-gradient(hsl(179, 100%, 80%) 50%, black 80%)
    no-repeat 60% 80%,
    radial-gradient(hsl(215, 100%, 80%) 50%, black 80%)
    no-repeat 75% 100%,
    radial-gradient(hsl(251, 100%, 80%) 50%, black 80%)
    no-repeat 90% 80%,
    radial-gradient(hsl(287, 100%, 80%) 50%, black 80%)
    no-repeat 100% 50%,
    radial-gradient(hsl(323, 100%, 80%) 50%, black 80%)
    no-repeat 110% 20%,
    radial-gradient(hsl(359, 100%, 80%) 50%, black 80%)
    no-repeat 125% 0;
    background: radial-gradient(hsl(359, 100%, 80%) 50%, black 80%) -10% 80%,
    radial-gradient(hsl(0, 100%, 80%) 50%, black 80%) 0 50%,
    radial-gradient(hsl(35, 100%, 80%) 50%, black 80%) 10% 20%,
    radial-gradient(hsl(71, 100%, 80%) 50%, black 80%) 25% 0,
    radial-gradient(hsl(107, 100%, 80%) 50%, black 80%) 40% 20%,
    radial-gradient(hsl(143, 100%, 80%) 50%, black 80%) 50% 50%,
    radial-gradient(hsl(179, 100%, 80%) 50%, black 80%) 60% 80%,
    radial-gradient(hsl(215, 100%, 80%) 50%, black 80%) 75% 100%,
    radial-gradient(hsl(251, 100%, 80%) 50%, black 80%) 90% 80%,
    radial-gradient(hsl(287, 100%, 80%) 50%, black 80%) 100% 50%,
    radial-gradient(hsl(323, 100%, 80%) 50%, black 80%) 110% 20%,
    radial-gradient(hsl(359, 100%, 80%) 50%, black 80%) 125% 0;
    background-color: black;
    background-repeat: no-repeat;
    background-size: 26px 26px;
    transition: .5s cubic-bezier(0, .25, 1, .75);
    transition: .3s cubic-bezier(0, .25, 1, .75);
    }
    .p8:hover {
    background-position: -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%, 50% 50%,
    60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
    background-position: -25% 100%, -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%,
    50% 50%, 60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
    }
  29. Ana Tudor revised this gist May 22, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -161,7 +161,7 @@ p {
    no-repeat 125% 0;
    background-color: black;
    background-size: 26px 26px;
    transition: 3.5s cubic-bezier(0, 3, 1, -2);
    transition: .5s cubic-bezier(0, .25, 1, .75);
    }
    .p8:hover {
    background-position: -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%, 50% 50%,
  30. Ana Tudor created this gist May 22, 2012.
    169 changes: 169 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,169 @@
    /**
    * animated gradient display
    */
    body {
    padding: 26px 0 0;
    }
    p {
    font-family: Helvetica;
    }
    .panel {
    width: 195px;
    height: 130px;
    margin: -1px;
    border: solid 2px lightblue;
    border-radius: 13px;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
    }

    /* FIRST ROW */
    .p0 {
    background: linear-gradient(left,
    hsl(0, 100%, 80%) 0%, hsl(35, 100%, 80%) 10%,
    hsl(71, 100%, 80%) 20%, hsl(107, 100%, 80%) 30%,
    hsl(143, 100%, 80%) 40%, hsl(179, 100%, 80%) 50%,
    hsl(215, 100%, 80%) 60%, hsl(251, 100%, 80%) 70%,
    hsl(287, 100%, 80%) 80%, hsl(323, 100%, 80%) 90%,
    hsl(359, 100%, 80%) 100%);
    background-size: 50% 1px;
    background-position: 0 0;
    transition: 3s cubic-bezier(0, 3.5, 1, -2.5);
    }
    .p0:hover {
    background-size: 100% 1px;
    background-position: -98px 0;
    }
    .p1 {
    background: linear-gradient(-30deg, midnightblue 32%, transparent 32%)
    13px 0,
    linear-gradient(-150deg, midnightblue 32%, transparent 32%)
    -13px 0,
    linear-gradient(150deg, midnightblue 32%, transparent 32%),
    linear-gradient(30deg, midnightblue 32%, greenyellow 32%);
    background-size: 26px 26px;
    transition: 2s linear;
    }
    .p1:hover {
    background-position: 208px 0, 182px 0, 195px 0, 195px 0;
    }
    .p2 {
    background: radial-gradient(hotpink, white 70%) no-repeat 0 50%,
    radial-gradient(gold, white 70%) no-repeat 50% 100%,
    radial-gradient(greenyellow, white 70%) no-repeat 100% 50%,
    radial-gradient(aqua, white 70%) no-repeat 50% 0;
    background-size: 35px 35px;
    transition: 3s cubic-bezier(0, 3.5, 1, -2.5);
    }
    .p2:hover {
    background-position: 0 0, 0 100%, 100% 100%, 100% 0;
    background-size: 25px 25px;
    }

    /* SECOND ROW */
    .p3 {
    background: linear-gradient(left, white, transparent);
    background-color: darkorange;
    transition: 4s ease-in-out;
    }
    .p3:hover {
    background-color: indigo;
    }
    .p4 {
    background: radial-gradient(center, transparent 61%, black 65%)
    no-repeat center,
    radial-gradient(0% 0%,
    rgb(123, 109, 100) 5%, rgb(182, 156, 132) 10%,
    rgb(182, 156, 132) 15%, rgb(182, 156, 132) 20%,
    rgb(196, 209, 228) 25%, rgb(197, 181, 155) 30%,
    rgb(149, 133, 119) 35%, rgb(171, 168, 175) 40%,
    rgb(165, 134, 116) 45%, rgb(182, 156, 132) 50%,
    rgb(233, 232, 218) 55%, rgb(172, 150, 127) 60%,
    rgb(154, 113, 81) 65%, rgb(214, 231, 232) 70%,
    rgb(150, 138, 121) 75%, rgb(178, 164, 169) 80%,
    rgb(173, 154, 144) 85%, rgb(179, 171, 160) 90%,
    rgb(143, 127, 112) 95%, rgb(101, 95, 87) 100%)
    no-repeat center;
    background-color: black;
    background-size: 26px 26px;
    transition: all 3s ease-in;
    }
    .p4:hover {
    background-size: 295px 295px;
    }
    .p5 {
    background: linear-gradient(45deg, slateblue 20%, transparent 25%,
    transparent 75%, slateblue 80%),
    linear-gradient(-45deg, slateblue 20%, transparent 25%,
    transparent 75%, slateblue 80%);
    background-color: plum;
    background-size: 10px 1px;
    transition: all 1s ease-out;
    }
    .p5:hover {
    background-size: 5px 20px;
    }

    /* THIRD ROW */
    .p6 {
    background: linear-gradient(hsl(0, 100%, 80%) 0%, hsl(35, 100%, 80%) 10%,
    hsl(71, 100%, 80%) 20%, hsl(107, 100%, 80%) 30%,
    hsl(143, 100%, 80%) 40%, hsl(179, 100%, 80%) 50%,
    hsl(215, 100%, 80%) 60%, hsl(251, 100%, 80%) 70%,
    hsl(287, 100%, 80%) 80%, hsl(323, 100%, 80%) 90%,
    hsl(359, 100%, 80%) 100%);
    background-size: 1px 390px;
    background-position: 0 0;
    transition: 4s cubic-bezier(0, 2, 1, -1);
    }
    .p6:hover {
    background-position: 0 100%;
    }
    .p7 {
    background: linear-gradient(-30deg, seashell 32%, transparent 32%)
    repeat-x 13px 50%,
    linear-gradient(-150deg, seashell 32%, transparent 32%)
    repeat-x -13px 50%,
    linear-gradient(150deg, seashell 32%, transparent 32%)
    repeat-x 0 50%,
    linear-gradient(30deg, seashell 32%, saddlebrown 32%)
    repeat-x 0 50%;
    background-color: seashell;
    background-size: 26px 26px;
    transition: 3.5s cubic-bezier(0, 3, 1, -2);
    }
    .p7:hover {
    background-size: 26px 260px;
    }
    .p8 {
    background: radial-gradient(hsl(0, 100%, 80%) 50%, black 80%)
    no-repeat 0 50%,
    radial-gradient(hsl(35, 100%, 80%) 50%, black 80%)
    no-repeat 10% 20%,
    radial-gradient(hsl(71, 100%, 80%) 50%, black 80%)
    no-repeat 25% 0,
    radial-gradient(hsl(107, 100%, 80%) 50%, black 80%)
    no-repeat 40% 20%,
    radial-gradient(hsl(143, 100%, 80%) 50%, black 80%)
    no-repeat 50% 50%,
    radial-gradient(hsl(179, 100%, 80%) 50%, black 80%)
    no-repeat 60% 80%,
    radial-gradient(hsl(215, 100%, 80%) 50%, black 80%)
    no-repeat 75% 100%,
    radial-gradient(hsl(251, 100%, 80%) 50%, black 80%)
    no-repeat 90% 80%,
    radial-gradient(hsl(287, 100%, 80%) 50%, black 80%)
    no-repeat 100% 50%,
    radial-gradient(hsl(323, 100%, 80%) 50%, black 80%)
    no-repeat 110% 20%,
    radial-gradient(hsl(359, 100%, 80%) 50%, black 80%)
    no-repeat 125% 0;
    background-color: black;
    background-size: 26px 26px;
    transition: 3.5s cubic-bezier(0, 3, 1, -2);
    }
    .p8:hover {
    background-position: -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%, 50% 50%,
    60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
    }
    20 changes: 20 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <!-- content to be placed inside <body>…</body> -->
    <p>Hover over the panels to see the effects :)
    <div class="panels">
    <a class="panel p0" href="#"></a>
    <a class="panel p1" href="#"></a>
    <a class="panel p2" href="#"></a>
    <a class="panel p3" href="#"></a>
    <a class="panel p4" href="#"></a>
    <a class="panel p5" href="#"></a>
    <a class="panel p6" href="#"></a>
    <a class="panel p7" href="#"></a>
    <a class="panel p8" href="#"></a>
    <a class="panel p9" href=""></a>
    <a class="panel p10" href=""></a>
    <a class="panel p11" href=""></a>
    <a class="panel p12" href=""></a>
    <a class="panel p13" href=""></a>
    <a class="panel p14" href=""></a>
    <a class="panel p15" href=""></a>
    </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":"80","seethrough":"","prefixfree":"1","page":"css"}