Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
​
<body>
  <article class="summary summary-article">
    <header class="summary_header">
      <h1 class="summary_title p-name">
        <a rel="bookmark" href="#">Levelling Up</a>
      </h1>
    </header>
    <p>
      <a class="u-url" href="http://iamashley.co.uk/">Ashley Baxter</a> recounts her experience of developing an app better suited to her customers&#8217; needs, even though she isn&#8217;t a programmer. With a new year approaching as fast as the old one can carry it, get building.
    </p>
    <footer class="summary_footer p-author h-card">
      <a href="#"><img class="u-photo" src="http://cloud.24ways.org/authors/ashleybaxter160.jpg" alt=""></a>
    </footer>
  </article>
</body>
</html>
 
body {
  font: 16px/1 sans-serif;
  background-color: #fff;
  margin: 0;
}
​
article {
  line-height: 1.2;
  margin: 1em;
  padding: 0.5rem;
  outline: 1px solid rgba(0,0,0,0.25);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
  width: 16rem;
  height: 16rem;
  position: relative;
}
article h1 {
  margin: 0 0 3rem 0;
}
article footer {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
}
article footer::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border: solid 2.25em;
  border-color: transparent transparent #fff #fff;
}
article footer::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 4.5em;
  width: 4.5em;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgwIiBoZWlnaHQ9IjcyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03IDBoNzN2NzNsLTczLTczeiIgZmlsbD0iI0Y2RjZGNiIvPjxwYXRoIGQ9Ik04NyAwbDY1LjggNy4yIDcuMiA2NS44LTczLTczeiIgZmlsbD0iI0U5RTlFOSIvPjxwYXRoIGQ9Ik0xNjcgMGw1Ny44OCAxNC40IDE1LjEyIDU4LjYtNzMtNzN6IiBmaWxsPSIjRTBFMEUwIi8+PHBhdGggZD0iTTI0NyAwbDUwLjY4IDIxLjYgMjIuMzIgNTEuNC03My03M3oiIGZpbGw9IiNENkQ2RDYiLz48cGF0aCBkPSJNMzI3IDBsNDQuMiAyOC44IDI4LjggNDQuMi03My03M3oiIGZpbGw9IiNjY2MiLz48cGF0aCBkPSJNNDg4LTFsMjguOCA0NC4yIDQ0LjIgMjguOC03My03M3oiIGZpbGw9IiM5MDAiLz48cGF0aCBkPSJNNTY4LTFsMjEuNiA1MS40IDUxLjQgMjEuNi03My03M3oiIGZpbGw9IiNBNTAwMEIiLz48cGF0aCBkPSJNNjQ4LTFsMTQuNCA1OC42IDU4LjYgMTQuNC03My03M3oiIGZpbGw9IiNCMzAwMTkiLz48cGF0aCBkPSJNNzI4LTFsNy4yIDY1LjggNjUuOCA3LjItNzMtNzN6IiBmaWxsPSIjQkYwMDI2Ii8+PHBhdGggZD0iTTgwOC0xdjczaDczbC03My03M3oiIGZpbGw9IiNjMDMiLz48L3N2Zz4=') -0.5em 0 no-repeat;
  background-size: 55em 4.5em;
  -webkit-animation: corner-reverse .3s steps(10);
  animation: corner-reverse .3s steps(10);
  z-index: 0;
}
article:hover footer::after {
  -webkit-animation: corner-forward .3s steps(10);
  animation: corner-forward .3s steps(10);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 2;
}
​
article footer img {
  display: block;
  height: 4.5em;
  width: 4.5em;
}
​
@-webkit-keyframes corner-forward {
  from {
    background-position: -0.5em;
    z-index: 0;
  }
  to {
    background-position: -50.5em;
    z-index: 2;
  }
}
@keyframes corner-forward {
  from {
    background-position: -0.5em;
    z-index: 0;
  }
  to {
    background-position: -50.5em;
    z-index: 2;
  }
}
@-webkit-keyframes corner-reverse {
  from {
    background-position: -50.5em;
    z-index: 2;
  }
  to {
    background-position: -0.5em;
    z-index: 0;
  }
}
@keyframes corner-reverse {
    from {
    background-position: -50.5em;
    z-index: 2;
  }
  to {
    background-position: -0.5em;
    z-index: 0;
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers