Skip to content

Instantly share code, notes, and snippets.

@jmwhittaker

jmwhittaker/dabblet.css

Created June 3, 2014 13:27
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. jmwhittaker revised this gist Jun 3, 2014. No changes.
  2. jmwhittaker created this gist Jun 3, 2014.
    36 changes: 36 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    /**
    * The first commented line is your dabblet’s title
    */


    .badge {
    position:absolute;
    left:200px;
    top:200px;
    background:red;
    display:inline-block;
    padding:2px 3px;
    border-radius:3px;}

    .animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    }

    @keyframes rotateInUpLeft {
    0% {
    transform-origin: -10px 0;
    transform: rotate(90deg);
    opacity: 0;
    }

    100% {
    transform-origin: left top;
    transform: rotate(0);
    opacity: 1;
    }
    }

    .rotateInUpLeft {
    animation-name: rotateInUpLeft;
    }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="badge rotateInUpLeft animated">29</div>
    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"}