Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Forked from anonymous/dabblet.css
Created May 27, 2013 13:33
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. kizu revised this gist May 27, 2013. 1 changed file with 1 addition and 4 deletions.
    5 changes: 1 addition & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -24,14 +24,11 @@
    width: 100%;
    position: relative;
    transition: all 1s;
    left: 0;
    background: blue;
    z-index: 9;
    margin-left: 0;
    padding-bottom: 999px;
    margin-bottom: -999px;
    }
    .cont:hover .p2 {
    left: -100%;
    margin-left: -40px;
    transform: translate(-100%,0);
    }
  2. kizu revised this gist May 27, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -28,6 +28,8 @@
    background: blue;
    z-index: 9;
    margin-left: 0;
    padding-bottom: 999px;
    margin-bottom: -999px;
    }
    .cont:hover .p2 {
    left: -100%;
  3. kizu revised this gist May 27, 2013. 3 changed files with 18 additions and 8 deletions.
    20 changes: 15 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,23 +3,33 @@

    overflow: hidden;
    position: relative;
    height: 60px;
    white-space: nowrap;
    }

    .p1, .p2 {
    padding: 20px;
    vertical-align: top;
    }

    .p1 {
    background: red;
    position: absolute;
    display: inline-block;
    width: 100%;
    white-space: normal;
    }

    .p2 {
    white-space: normal;
    display: inline-block;
    width: 100%;
    background: blue;
    position: absolute;
    position: relative;
    transition: all 1s;
    left: 100%;
    left: 0;
    background: blue;
    z-index: 9;
    margin-left: 0;
    }
    .cont:hover .p2 {
    left: -100%;
    margin-left: -40px;
    }
    4 changes: 2 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <div class="cont">
    <div class="p1">content</div>
    <div class="p2">content2</div>
    <div class="p1">content<br/>asdf<br/>asdfsfd</div
    ><div class="p2">content2</div>
    </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","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  4. @invalid-email-address Anonymous created this gist May 27, 2013.
    25 changes: 25 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    .cont {
    width: 100%;

    overflow: hidden;
    position: relative;
    height: 60px;
    }

    .p1, .p2 {
    padding: 20px;
    }

    .p1 {
    background: red;
    position: absolute;
    width: 100%;
    }

    .p2 {
    width: 100%;
    background: blue;
    position: absolute;
    transition: all 1s;
    left: 100%;
    }
    4 changes: 4 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <div class="cont">
    <div class="p1">content</div>
    <div class="p2">content2</div>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    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","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}