Skip to content

Instantly share code, notes, and snippets.

@thomasplevy
Forked from anonymous/dabblet.css
Created June 10, 2012 16:15

Revisions

  1. thomasplevy revised this gist Jun 10, 2012. No changes.
  2. @invalid-email-address Anonymous created this gist Jun 10, 2012.
    36 changes: 36 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    /**
    * css3 slash images
    */

    div {
    position: relative;
    margin: 25px;
    }

    div:before {
    content: "";
    border-left: 350px solid white;
    border-bottom: 30px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    }

    div:after {
    content: "";
    border-right: 350px solid white;
    border-top: 30px solid transparent;
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: 1;
    }

    img {
    transition: all .3s ease;
    }

    img:hover {
    opacity: .8;
    }
    1 change: 1 addition & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div><img src="http://placedog.com/350/500" alt="DOG!"></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":"all"}