Skip to content

Instantly share code, notes, and snippets.

@Neofyt

Neofyt/dabblet.css

Forked from JoelBesada/dabblet.css
Created March 20, 2012 00:50
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. Neofyt revised this gist Mar 20, 2012. No changes.
  2. @JoelBesada JoelBesada revised this gist Mar 19, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,14 +27,14 @@ <h1>Maintaining CSS Style States using "Infinite" Transition Delays</h1>

    <p>
    I've written a
    <a href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/"> blog post </a> explanining how
    <a target="_blank" href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/"> blog post </a> explanining how
    this all works, but please keep in mind that things like this should ideally be handled
    with Javascript. After all, this is a dirty hack, not a CSS feature.
    </p>
    </section>

    <small>Credit goes to to <a href="http://www.tekepon.net/fsm/">First Seed Material</a> for the
    character sprite, and <a href="http://vxresource.wordpress.com/2010/03/17/the-real-macks-tileset/">
    <small>Credit goes to to <a target="_blank" href="http://www.tekepon.net/fsm/">First Seed Material</a> for the
    character sprite, and <a target="_blank" href="http://vxresource.wordpress.com/2010/03/17/the-real-macks-tileset/">
    Mack</a> for the map tileset.
    </small>
    </div>
  3. @JoelBesada JoelBesada revised this gist Mar 19, 2012. 2 changed files with 3 additions and 2 deletions.
    3 changes: 2 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,8 @@ <h1>Maintaining CSS Style States using "Infinite" Transition Delays</h1>
    </p>

    <p>
    I've written a <a href="javascript:alert('Coming Soon!')"> blog post </a> explanining how
    I've written a
    <a href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/"> blog post </a> explanining how
    this all works, but please keep in mind that things like this should ideally be handled
    with Javascript. After all, this is a dirty hack, not a CSS feature.
    </p>
    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","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}
  4. @JoelBesada JoelBesada revised this gist Mar 19, 2012. 2 changed files with 1 addition and 7 deletions.
    6 changes: 0 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -148,7 +148,6 @@ small:hover {
    right: 5px;
    }

    /* Animate the position while holding down a button */
    .up:active ~ .screen .char, .down:active ~ .screen .char, .left:active ~ .screen .char, .right:active ~ .screen .char {
    transition: margin-top 2s linear,
    margin-left 2s linear;
    @@ -215,11 +214,6 @@ small:hover {
    transition-timing-function: linear;
    }

    /* This could be a lot simpler with background-position-x/y,
    but the property isn't supported in all modern browsers
    because it's not in the W3C spec :(
    http://snook.ca/archives/html_and_css/background-position-x-y */
    @keyframes walk-up {
    0%, 32.99% { background-position: 0 -144px; }
    33%, 65.99% { background-position: 32px -144px; }
    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","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
  5. @JoelBesada JoelBesada revised this gist Mar 19, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <div class="wrapper">
    <h1>Maintaining CSS Style States with "Infinite" Transition Delays</h1>
    <h1>Maintaining CSS Style States using "Infinite" Transition Delays</h1>

    <div class="device">
    <button class="up"></button>
    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","seethrough":"","prefixfree":"1","page":"result"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}
  6. @JoelBesada JoelBesada revised this gist Mar 18, 2012. No changes.
  7. @JoelBesada JoelBesada revised this gist Mar 18, 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","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"result"}
  8. @JoelBesada JoelBesada revised this gist Mar 18, 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
    @@ -10,7 +10,7 @@ body {
    }
    .wrapper {
    width: 900px;
    margin: 0 auto;
    margin: 70px auto;
    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <div class="wrapper">
    <h1>Maintaining CSS Styke States with "Infinite" Transition Delays</h1>
    <h1>Maintaining CSS Style States with "Infinite" Transition Delays</h1>

    <div class="device">
    <button class="up"></button>
  9. @JoelBesada JoelBesada revised this gist Mar 18, 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
    @@ -15,7 +15,7 @@ body {
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: 1.8em;
    font-size: 1.6em;
    }
    a {
    text-decoration: none;
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <div class="wrapper">
    <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>
    <h1>Maintaining CSS Styke States with "Infinite" Transition Delays</h1>

    <div class="device">
    <button class="up"></button>
  10. @JoelBesada JoelBesada revised this gist Mar 18, 2012. No changes.
  11. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 41 additions and 35 deletions.
    4 changes: 4 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,10 @@ body {
    text-shadow: 0 2px 0 white;
    color: #222;
    }
    .wrapper {
    width: 900px;
    margin: 0 auto;
    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    72 changes: 37 additions & 35 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,37 +1,39 @@
    <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>

    <div class="device">
    <button class="up"></button>
    <button class="down"></button>
    <button class="left"></buton>
    <button class="right"></button>

    <div class="screen">
    <div class="char"></div>
    <div class="overlay"></div>
    <div class="wrapper">
    <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>

    <div class="device">
    <button class="up"></button>
    <button class="down"></button>
    <button class="left"></buton>
    <button class="right"></button>

    <div class="screen">
    <div class="char"></div>
    <div class="overlay"></div>
    </div>
    </div>

    <section>
    <p>
    This demo is <strong>completely JavaScript-free</strong>.
    Feel free to move the character around with the D-pad, and notice how it always
    keeps its position after you stop moving.
    </p>
    <p>
    This is made possible by using a virtually infinite transition delay, so that the
    CSS rules never return to their default state. The character will always be stuck
    in a transition and only moves when you hold down a button.
    </p>

    <p>
    I've written a <a href="javascript:alert('Coming Soon!')"> blog post </a> explanining how
    this all works, but please keep in mind that things like this should ideally be handled
    with Javascript. After all, this is a dirty hack, not a CSS feature.
    </p>
    </section>

    <small>Credit goes to to <a href="http://www.tekepon.net/fsm/">First Seed Material</a> for the
    character sprite, and <a href="http://vxresource.wordpress.com/2010/03/17/the-real-macks-tileset/">
    Mack</a> for the map tileset.
    </small>
    </div>

    <section>
    <p>
    This demo is <strong>completely JavaScript-free</strong>.
    Feel free to move the character around with the D-pad, and notice how it always
    keeps its position after you stop moving.
    </p>
    <p>
    This is made possible by using a virtually infinite transition delay, so that the
    CSS rules never return to their default state. The character will always be stuck
    in a transition and only moves when you hold down a button.
    </p>

    <p>
    I've written a <a href="javascript:alert('Coming Soon!')"> blog post </a> explanining how
    this all works, but please keep in mind that things like this should ideally be handled
    with Javascript. After all, this is a dirty hack, not a CSS feature.
    </p>
    </section>

    <small>Credit goes to to <a href="http://www.tekepon.net/fsm/">First Seed Material</a> for the
    character sprite, and <a href="http://vxresource.wordpress.com/2010/03/17/the-real-macks-tileset/">
    Mack</a> for the map tileset.
    </small>
  12. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 24 additions and 1 deletion.
    23 changes: 23 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,12 +6,23 @@ body {
    font-size: 18px;
    line-height: 1.6em;
    text-shadow: 0 2px 0 white;
    color: #222;
    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: 1.8em;
    }
    a {
    text-decoration: none;
    color: #B46919;
    }
    a:visited {
    color: #834B0F;
    }
    a:hover {
    color: #E9A051;
    }
    .device {
    display: inline-block;
    position: relative;
    @@ -34,6 +45,18 @@ section {
    width: 500px;

    }
    small {
    display: block;
    margin-top: 20px;
    opacity: 0.3;
    text-align: center;
    padding:
    20px;
    transition: opacity 0.5s;
    }
    small:hover {
    opacity: 1;
    }
    .up, .down, .left, .right {
    position: absolute;
    z-index: 1001;
    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","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
  13. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 1 changed file with 11 additions and 2 deletions.
    13 changes: 11 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,9 +20,18 @@ <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>
    </p>
    <p>
    This is made possible by using a virtually infinite transition delay, so that the
    CSS rules never return to their default state. The character will always stay stuck
    CSS rules never return to their default state. The character will always be stuck
    in a transition and only moves when you hold down a button.
    </p>
    </section>

    <p>
    I've written a <a href="javascript:alert('Coming Soon!')"> blog post </a> explanining how
    this all works, but please keep in mind that things like this should ideally be handled
    with Javascript. After all, this is a dirty hack, not a CSS feature.
    </p>
    </section>

    <small>Credit goes to to <a href="http://www.tekepon.net/fsm/">First Seed Material</a> for the
    character sprite, and <a href="http://vxresource.wordpress.com/2010/03/17/the-real-macks-tileset/">
    Mack</a> for the map tileset.
    </small>
  14. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 3 additions and 2 deletions.
    3 changes: 2 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,8 @@ <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>
    </p>
    <p>
    This is made possible by using a virtually infinite transition delay, so that the
    CSS rules never return to their default state.
    CSS rules never return to their default state. The character will always stay stuck
    in a transition and only moves when you hold down a button.
    </p>
    </section>

    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","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}
  15. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 10 additions and 5 deletions.
    3 changes: 1 addition & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -87,7 +87,6 @@ section {
    top: -8px;
    }


    .up {
    top: 300px;
    left: -25px;
    @@ -122,7 +121,7 @@ section {
    right: 5px;
    }


    /* Animate the position while holding down a button */
    .up:active ~ .screen .char, .down:active ~ .screen .char, .left:active ~ .screen .char, .right:active ~ .screen .char {
    transition: margin-top 2s linear,
    margin-left 2s linear;
    12 changes: 9 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,9 +13,15 @@ <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>
    </div>

    <section>
    This demo is <strong>completely JavaScript-free</strong>.
    Feel free to move the character around with the D-pad, and notice how it always
    keeps its position.
    <p>
    This demo is <strong>completely JavaScript-free</strong>.
    Feel free to move the character around with the D-pad, and notice how it always
    keeps its position after you stop moving.
    </p>
    <p>
    This is made possible by using a virtually infinite transition delay, so that the
    CSS rules never return to their default state.
    </p>
    </section>


  16. @JoelBesada JoelBesada revised this gist Mar 18, 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
    @@ -5,7 +5,7 @@ body {
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6em;
    text-shadow: 0 1px 0 white;
    text-shadow: 0 2px 0 white;
    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
  17. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 9 additions and 2 deletions.
    7 changes: 6 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,11 +3,14 @@ body {
    background: url(http://dabblet.com/img/noise.png);
    background-color: #F5F2F0;
    font-family: Georgia, serif;

    font-size: 18px;
    line-height: 1.6em;
    text-shadow: 0 1px 0 white;
    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: 1.8em;
    }
    .device {
    display: inline-block;
    @@ -27,6 +30,8 @@ h1 {
    section {
    display: inline-block;
    vertical-align: top;
    padding: 30px;
    width: 500px;

    }
    .up, .down, .left, .right {
    4 changes: 3 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,9 @@ <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>
    </div>

    <section>
    This demo
    This demo is <strong>completely JavaScript-free</strong>.
    Feel free to move the character around with the D-pad, and notice how it always
    keeps its position.
    </section>


  18. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 13 additions and 1 deletion.
    6 changes: 6 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,12 +3,14 @@ body {
    background: url(http://dabblet.com/img/noise.png);
    background-color: #F5F2F0;
    font-family: Georgia, serif;

    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    }
    .device {
    display: inline-block;
    position: relative;
    background:#AD0F0F;
    width: 230px;
    @@ -22,7 +24,11 @@ h1 {
    inset 0 0 10px rgba(255,255,255,0.5),
    inset 0 2px 2px rgba(255,255,255,0.25);
    }
    section {
    display: inline-block;
    vertical-align: top;

    }
    .up, .down, .left, .right {
    position: absolute;
    z-index: 1001;
    8 changes: 7 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <h1>Storing CSS States with "Infinite" Transition Delays</h1>
    <h1>Maintaining CSS States with "Infinite" Transition Delays</h1>

    <div class="device">
    <button class="up"></button>
    <button class="down"></button>
    @@ -11,3 +12,8 @@ <h1>Storing CSS States with "Infinite" Transition Delays</h1>
    </div>
    </div>

    <section>
    This demo
    </section>


  19. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 9 additions and 2 deletions.
    10 changes: 8 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,12 @@
    /* CSS Gamepad */
    /* CSS States */
    body {
    background: #f3f3f3;
    background: url(http://dabblet.com/img/noise.png);
    background-color: #F5F2F0;
    font-family: Georgia, serif;
    }
    h1 {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    }
    .device {
    position: relative;
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    <h1>Storing CSS States with "Infinite" Transition Delays</h1>
    <div class="device">
    <button class="up"></button>
    <button class="down"></button>
  20. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 1 changed file with 56 additions and 9 deletions.
    65 changes: 56 additions & 9 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,13 @@ body {
    }
    .device {
    position: relative;
    background:#181E24;
    background:#AD0F0F;
    width: 230px;
    height: 450px;
    padding: 20px 15px;
    margin: 20px;
    border-radius: 20px;
    border: 1px solid black;
    border: 1px solid #410707;
    border-bottom-width: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.7),
    inset 0 0 10px rgba(255,255,255,0.5),
    @@ -20,44 +20,91 @@ body {
    .up, .down, .left, .right {
    position: absolute;
    z-index: 1001;
    margin-top: 300px;
    margin-left: 50%;
    font-size: 40px;
    width: 50px;
    height: 50px;
    background: #FFA03A;
    border: 1px solid #915515;
    box-shadow: 0 3px 0 #52300E,
    inset 0 0 10px rgba(255,255,255,0.3);

    appearance: none;
    border-radius: 50px;
    cursor: pointer;
    }


    .up:active, .down:active, .left:active, .right:active {
    margin-top: 3px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
    }

    .up:before, .down:before, .left:before, .right:before {
    display: block;
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: red;
    background: #E4923D;
    box-shadow: 0 2px 2px rgba(255,255,255,0.25),
    inset 0 1px 0 rgba(0,0,0,0.5);

    }

    .up:after, .down:after, .left:after, .right:after {
    display: block;
    position: absolute;
    content: "";
    top: -5px;
    left: -6px;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    box-shadow: 0 2px 2px rgba(255,255,255,0.25),
    inset 0 2px 2px rgba(0,0,0,0.5);
    }

    .up:active:after, .down:active:after, .left:active:after, .right:active:after {
    top: -8px;
    }


    .up {
    top: 0;
    top: 300px;
    left: -25px;
    }
    .up:before {
    top: 5px;
    left: 15px;
    left: 17px;
    }
    .down {
    top: 100px;
    top: 400px;
    left: -25px;
    }
    .down:before {
    bottom: 5px;
    left: 17px;
    }
    .left {
    top: 50px;
    top: 350px;
    left: -75px;
    }
    .left:before {
    top: 17px;
    left: 5px;
    }

    .right {
    top: 50px;
    top: 350px;
    left: 25px;
    }
    .right:before {
    top: 17px;
    right: 5px;
    }


    .up:active ~ .screen .char, .down:active ~ .screen .char, .left:active ~ .screen .char, .right:active ~ .screen .char {
    transition: margin-top 2s linear,
  21. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,12 +7,14 @@ body {
    background:#181E24;
    width: 230px;
    height: 450px;
    padding: 15px;
    padding: 20px 15px;
    margin: 20px;
    border-radius: 5px;
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: 0 0 5px rgba(13,83,77,0.5),
    inset 0 0 10px rgba(255,255,255,0.5);
    border-bottom-width: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.7),
    inset 0 0 10px rgba(255,255,255,0.5),
    inset 0 2px 2px rgba(255,255,255,0.25);
    }

    .up, .down, .left, .right {
  22. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 20 additions and 6 deletions.
    24 changes: 19 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,13 @@ body {
    }
    .device {
    position: relative;
    background:#52B5AC;
    background:#181E24;
    width: 230px;
    height: 450px;
    padding: 15px;
    margin: 20px;
    border-radius: 5px;
    border: 2px solid #11776E;
    border: 1px solid black;
    box-shadow: 0 0 5px rgba(13,83,77,0.5),
    inset 0 0 10px rgba(255,255,255,0.5);
    }
    @@ -24,12 +24,26 @@ body {
    width: 50px;
    height: 50px;
    appearance: none;
    border-radius: 50px;
    cursor: pointer;
    }
    .up:before, .down:before, .left:before, .right:before {
    display: block;
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: red;
    }

    .up {
    top: 0;
    left: -25px;
    }
    .up:before {
    top: 5px;
    left: 15px;
    }
    .down {
    top: 100px;
    left: -25px;
    @@ -80,9 +94,9 @@ body {
    width: 224px;
    height: 256px;
    overflow:hidden;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    box-shadow: 0 0 20px rgba(255,255,255,0.25),
    0 2px 1px rgba(255,255,255,0.15);
    background: url("http://joelb.me/extassets/sprites/home-layer-1.png") no-repeat;
    border: 1px solid #11776E;
    }

    .overlay {
    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","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
  23. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 3 changed files with 14 additions and 9 deletions.
    13 changes: 9 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,9 @@ body {
    padding: 15px;
    margin: 20px;
    border-radius: 5px;
    border: 2px solid #11776E;
    box-shadow: 0 0 5px rgba(13,83,77,0.5),
    inset 0 0 10px rgba(255,255,255,0.5);
    }

    .up, .down, .left, .right {
    @@ -20,6 +23,7 @@ body {
    font-size: 40px;
    width: 50px;
    height: 50px;
    appearance: none;
    }

    .up {
    @@ -76,8 +80,9 @@ body {
    width: 224px;
    height: 256px;
    overflow:hidden;
    box-shadow: 0 0 30px white;
    background: url("http://joelb.me/extassets/sprites/home-layer1.png") no-repeat;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    background: url("http://joelb.me/extassets/sprites/home-layer-1.png") no-repeat;
    border: 1px solid #11776E;
    }

    .overlay {
    @@ -86,8 +91,8 @@ body {
    height: 100%;
    top: 0;
    left: 0;
    background: url("http://joelb.me/extassets/sprites/home-layer2.png") no-repeat;
    box-shadow: inset 0 0 0px rgba(0,0,0,0.5);
    background: url("http://joelb.me/extassets/sprites/home-layer-2.png") no-repeat;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
    z-index: 1000;
    }

    8 changes: 4 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <div class="device">
    <button class="up" accesskey="j">&uarr;</button>
    <button class="down" accesskey="k">&darr;</button>
    <button class="left" >&larr;</buton>
    <button class="right">&rarr;</button>
    <button class="up"></button>
    <button class="down"></button>
    <button class="left"></buton>
    <button class="right"></button>

    <div class="screen">
    <div class="char"></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","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}
  24. @JoelBesada JoelBesada revised this gist Mar 18, 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
    @@ -86,7 +86,7 @@ body {
    height: 100%;
    top: 0;
    left: 0;
    background: url("http://joelb.me/extassets/sprites/home-layer22.png") no-repeat;
    background: url("http://joelb.me/extassets/sprites/home-layer2.png") no-repeat;
    box-shadow: inset 0 0 0px rgba(0,0,0,0.5);
    z-index: 1000;
    }
  25. @JoelBesada JoelBesada revised this gist Mar 18, 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
    @@ -86,8 +86,8 @@ body {
    height: 100%;
    top: 0;
    left: 0;
    background: url("http://joelb.me/extassets/sprites/home-layer2.png") no-repeat;
    box-shadow: inset 0 0 100px black;
    background: url("http://joelb.me/extassets/sprites/home-layer22.png") no-repeat;
    box-shadow: inset 0 0 0px rgba(0,0,0,0.5);
    z-index: 1000;
    }

  26. @JoelBesada JoelBesada revised this gist Mar 18, 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
    @@ -1,10 +1,10 @@
    /* CSS Gamepad */
    body {
    background: black;
    background: #f3f3f3;
    }
    .device {
    position: relative;
    background:#5AE0A5;
    background:#52B5AC;
    width: 230px;
    height: 450px;
    padding: 15px;
  27. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,11 +4,12 @@ body {
    }
    .device {
    position: relative;
    background: white;
    width: 240px;
    background:#5AE0A5;
    width: 230px;
    height: 450px;
    padding: 10px;
    padding: 15px;
    margin: 20px;
    border-radius: 5px;
    }

    .up, .down, .left, .right {
    @@ -75,6 +76,7 @@ body {
    width: 224px;
    height: 256px;
    overflow:hidden;
    box-shadow: 0 0 30px white;
    background: url("http://joelb.me/extassets/sprites/home-layer1.png") no-repeat;
    }

    @@ -85,7 +87,7 @@ body {
    top: 0;
    left: 0;
    background: url("http://joelb.me/extassets/sprites/home-layer2.png") no-repeat;

    box-shadow: inset 0 0 100px black;
    z-index: 1000;
    }

  28. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 1 changed file with 13 additions and 3 deletions.
    16 changes: 13 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,14 @@
    body {
    background: black;
    }
    .device {
    position: relative;
    background: white;
    width: 240px;
    height: 450px;
    padding: 10px;
    margin: 20px;
    }

    .up, .down, .left, .right {
    position: absolute;
    @@ -61,10 +69,12 @@ body {

    .screen {
    position: relative;
    margin: 20px auto;
    background: red;
    width: 0;
    margin: 0 auto;
    padding: 128px 112px;
    box-sizing: border-box;
    width: 224px;
    height: 256px;
    overflow:hidden;
    background: url("http://joelb.me/extassets/sprites/home-layer1.png") no-repeat;
    }

  29. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 2 changed files with 16 additions and 17 deletions.
    12 changes: 6 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -30,36 +30,36 @@ body {
    left: 25px;
    }

    .up:active ~ .stage .char, .down:active ~ .stage .char, .left:active ~ .stage .char, .right:active ~ .stage .char {
    .up:active ~ .screen .char, .down:active ~ .screen .char, .left:active ~ .screen .char, .right:active ~ .screen .char {
    transition: margin-top 2s linear,
    margin-left 2s linear;
    }

    .up:active ~ .stage .char {
    .up:active ~ .screen .char {
    margin-top: -84px;
    background-position: 0 -144px;
    animation: walk-up 0.65s infinite;
    }

    .down:active ~ .stage .char {
    .down:active ~ .screen .char {
    margin-top: 90px;
    background-position: 0 0;
    animation: walk-down 0.65s infinite;
    }

    .left:active ~ .stage .char {
    .left:active ~ .screen .char {
    margin-left: -88px;
    background-position: 0 -48px;
    animation: walk-left 0.65s infinite;
    }

    .right:active ~ .stage .char {
    .right:active ~ .screen .char {
    margin-left: 88px;
    background-position: 0 -96px;
    animation: walk-right 0.65s infinite;
    }

    .stage {
    .screen {
    position: relative;
    margin: 20px auto;
    background: red;
    21 changes: 10 additions & 11 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,12 @@
    <button class="up" accesskey="j">&uarr;</button>
    <button class="down" accesskey="k">&darr;</button>

    <button class="left" >&larr;</buton>
    <button class="right">&rarr;</button>

    <div class="stage">


    <div class="char"></div>
    <div class="overlay"></div>
    <div class="device">
    <button class="up" accesskey="j">&uarr;</button>
    <button class="down" accesskey="k">&darr;</button>
    <button class="left" >&larr;</buton>
    <button class="right">&rarr;</button>

    <div class="screen">
    <div class="char"></div>
    <div class="overlay"></div>
    </div>
    </div>

  30. @JoelBesada JoelBesada revised this gist Mar 18, 2012. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,27 +5,28 @@ body {

    .up, .down, .left, .right {
    position: absolute;
    margin-top: 100%;
    z-index: 1001;
    margin-top: 300px;
    margin-left: 50%;
    font-size: 40px;
    width: 50px;
    height: 50px;
    }

    .up {
    top: -300px;
    top: 0;
    left: -25px;
    }
    .down {
    top: -200px;
    top: 100px;
    left: -25px;
    }
    .left {
    top: -250px;
    top: 50px;
    left: -75px;
    }
    .right {
    top: -250px;
    top: 50px;
    left: 25px;
    }

    @@ -60,7 +61,7 @@ body {

    .stage {
    position: relative;
    margin: 100px auto;
    margin: 20px auto;
    background: red;
    width: 0;
    padding: 128px 112px;