Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created June 24, 2013 11:14
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. @invalid-email-address Anonymous created this gist Jun 24, 2013.
    54 changes: 54 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    /**
    * Matrix 3d transform for obtaining trapezoid? (SO)
    * http://stackoverflow.com/q/14480341/1397351
    */


    * {
    transform-style: preserve-3d;
    }

    .subject {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0px;
    top: 0;
    margin-top: 0px;
    }
    .whatBox {
    width: 340px;
    height: 450px;
    position: relative;
    top: 30px;
    left: 0;
    margin: 0 auto;
    background: #eee;
    perspective: 1000px;

    }
    .what {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;


    transform-origin: 0% 0%;
    transform: rotateX(98deg)
    scaleY(.9)
    translateZ(0px) translateX(0px)
    translateY(0px) skewx(0deg);
    }

    .img {
    width: 100%;
    height: 100%;
    transform: scaleY(-1);
    }
    .img, .subject {
    background: url('http://hdnaturepictures.com/wp-content/uploads/2013/05/Paradise-Place-Wallpaper.jpg');
    }


    .target { mask: url(#m12); }
    18 changes: 18 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!-- content to be placed inside <body>…</body> -->

    <svg height="0">
    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="white" stop-opacity="0" offset="1"/>
    </linearGradient>
    <!--<circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>-->
    <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
    <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
    </mask>
    </svg>

    <div class="whatBox">
    <div class="subject"></div>
    <div class="what target"><div class="img"></div></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-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}