Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created February 27, 2012 17:11

Revisions

  1. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ section {
    color: white;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 -.1em .2em black;
    animation: fall .5s 1s cubic-bezier(.2,.5,.5,1.5);
    animation: fall .5s 1s cubic-bezier(.2,.5,.5,1.5) backwards;
    }

    h1 { margin-top: 0 }
  2. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ section {
    color: white;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 -.1em .2em black;
    animation: fall .5s .5s cubic-bezier(.2,.5,.5,1.5);
    animation: fall .5s 1s cubic-bezier(.2,.5,.5,1.5);
    }

    h1 { margin-top: 0 }
  3. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ section {
    color: white;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 -.1em .2em black;
    animation: fall .5s cubic-bezier(.2,.5,.5,1.5);
    animation: fall .5s .5s cubic-bezier(.2,.5,.5,1.5);
    }

    h1 { margin-top: 0 }
  4. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ section {
    color: white;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 -.1em .2em black;
    animation: fall .5s;
    animation: fall .5s cubic-bezier(.2,.5,.5,1.5);
    }

    h1 { margin-top: 0 }
  5. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,7 @@ html {
    }

    @keyframes fall {
    0% { margin-top: -30em; }
    100% { margin-top: 4em }
    from { margin-top: -30em; }
    }

    section {
  6. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,8 @@ html {
    }

    @keyframes fall {
    from { margin-top: -30em; }
    to { margin-top: 4em }
    0% { margin-top: -30em; }
    100% { margin-top: 4em }
    }

    section {
  7. LeaVerou revised this gist Feb 27, 2012. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion dabblet.css
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /**
    * Learning CSS3
    * background-clip
    * Animations
    */

    html {
    @@ -9,6 +9,11 @@ html {
    background-size: cover;
    }

    @keyframes fall {
    from { margin-top: -30em; }
    to { margin-top: 4em }
    }

    section {
    max-width: 20em;
    padding: 3em;
    @@ -19,6 +24,7 @@ section {
    color: white;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 -.1em .2em black;
    animation: fall .5s;
    }

    h1 { margin-top: 0 }
  8. LeaVerou created this gist Feb 27, 2012.
    24 changes: 24 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /**
    * Learning CSS3
    * background-clip
    */

    html {
    min-height:100%;
    background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
    background-size: cover;
    }

    section {
    max-width: 20em;
    padding: 3em;
    margin: 4em auto;
    border: 20px solid rgba(0,0,0,.5);
    background-color: black;
    background-clip: padding-box;
    color: white;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 -.1em .2em black;
    }

    h1 { margin-top: 0 }
    7 changes: 7 additions & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <section>
    <h1>Learning CSS3</h1>
    <p>This is just some example content. Don’t even bother reading it, you will just waste your time.
    Why do you keep reading? Do I have to use Lorem Ipsum to stop you from that?
    Ok, here goes: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Still reading? Oh gosh, you’re impossible. I’ll stop here to save you from yourself.
    </section>
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}