Animated CSS Library Card

I dig the old-timey library cards that library books used to have before barcodes.

by nate

HTML

<div class="container">
  <div class="library-card envelope">

      <div class="front">
          <p class="stamp">Property of<br> jsFiddle</p>
      </div>

      <div class="card">
          <h4 class="dewey-decimal">005.1</h4>
          <h2 class="author">Eagle, Nate</h2>
          <h1 class="title">A back-of-the-book library card and pocket in HTML&nbsp;&amp;&nbsp;CSS3</h1>

          <table>
              <tr>
                  <th class="due-date">Date Due</th>
                  <th class="issued-to">Issued To</th>
              </tr>
              <!-- Shout-outs to some AOL buds! -->

              <tr>
                  <td class="due-date">
                      <time>12-23-11</time>
                  </td>
                  <td class="issued-to">
                      Sobia Ali
                  </td>
              </tr>
              <tr>
                  <td class="due-date">
                      <time>1-14-12</time>
                  </td>
                  <td class="issued-to">
                      Andrew Thoreaux
                  </td>
              </tr>
              <tr>
                  <td class="due-date">
                      <time>1-31-12</time>
                  </td>
                  <td class="issued-to">
                      Dave Artz
                  </td>
              </tr>
          </table>
      </div>

  </div>
</div>

CSS

/* Look, ma! No images!
   GRATUITIOUS use of hefty web fonts, though. */

@import url('https://fonts.googleapis.com/css?family=Give+You+Glory|Handlee|Shadows+Into+Light');

html {
    -webkit-font-smoothing: antialiased;
}

body {
    /*padding: 50px;*/
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.library-card {
    font-family: monospace;
}

.library-card.envelope {
    background-color: hsl( 50, 50%, 70% );
    border-radius: 3px;
    box-shadow: 0 0 1px hsla( 0, 0%, 0%, 0.5 );
    height: 300px;
    /*margin: 100px auto 0;*/
    padding-top: 50px;
    position: relative;
    width: 280px;
}

.library-card > .front {
    background-color: hsl( 50, 50%, 70% );
    background:
        -webkit-radial-gradient(
            hsl( 50, 50%, 90% ),
            hsl( 50, 50%, 70% )
        ) 50% -200px,
        hsl( 50, 50%, 70% );
    background-repeat: no-repeat;
    background-size: 150% 500px;
    border-radius: 2px 2px 3px 3px;
    box-shadow: 0 -2px 3px hsla( 0, 0%, 0%, 0.1 );
    cursor: pointer;
    height: 300px;
    margin-left: -10px;
    position: relative;
    width: 300px;
    z-index: 1;
}

.library-card > .card {
    
    background:
        -webkit-linear-gradient( -90deg, hsl( 40, 50%, 95% ) 0, hsl( 40, 50%, 95% ) 104px, hsl( 200, 0%, 70% ) 106px ),
        -webkit-linear-gradient( -90deg, transparent 0, transparent 141px, hsl( 200, 0%, 70% ) 142px ),
        -webkit-linear-gradient( -90deg, transparent 0, transparent 35px, hsl( 200, 0%, 70% ) 36px ),
        -webkit-linear-gradient( 0deg, transparent 0, transparent 64px, hsl( 200, 0%, 70% ) 65px ),
        hsl( 40, 50%, 95% );
    background-repeat:
        no-repeat,
        no-repeat,
        repeat,
        no-repeat;
    background-size:
        100% 106px,
        100% 142px,
        100% 36px,
        65px 100%;
    border-radius: 3px;
    box-shadow: 0 0 0.2em hsla( 0, 0%, 0%, 0.5 );
    height: 395px;
    margin-left:...

JavaScript

var $envelope = $( '.library-card.envelope' ),
    $card = $envelope.find( '.card' ),
    $front = $envelope.find( '.front' );

$front.on( 'click', function( event ) {
    $envelope.toggleClass( 'card-out' );
});
           
$card.on( 'click', function( event ) {
    $envelope.toggleClass( 'card-out' );
});