Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created May 9, 2012 13:09

Revisions

  1. LeaVerou revised this gist May 9, 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
    @@ -5,7 +5,7 @@


    #inner, #outer {
    transition: 1s;
    transition: 3s font-size, 1s width;
    }

    #outer {
  2. LeaVerou revised this gist May 9, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,7 @@

    #outer {
    font-size: 20px;
    white-space: nowrap;
    }

    #outer:hover {
  3. LeaVerou created this gist May 9, 2012.
    26 changes: 26 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    /**
    * Transitioning font-size and relative lengths
    * See: http://lists.w3.org/Archives/Public/www-style/2011Nov/0016.html
    */


    #inner, #outer {
    transition: 1s;
    }

    #outer {
    font-size: 20px;
    }

    #outer:hover {
    font-size: 50px;
    }

    #inner {
    width: 5em;
    background-color: orange;
    }

    #inner:hover {
    width: 10em;
    }
    5 changes: 5 additions & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div id="outer">
    <div id="inner">
    Hover this
    </div>
    </div>
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}