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>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style type="unprocessed" id="AutoprefixerIn">%css%</style>
<style id="AutoprefixerOut"></style>
<script>
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css;
</script>
</head>
<body>
  <div class="page">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit nihil voluptatem quasi natus sint, ullam corporis. Dolorum, excepturi nihil eaque amet consequuntur asperiores, aut sint obcaecati hic, laudantium impedit deleniti enim et quidem fugit nemo at quisquam fuga veritatis maxime illum animi blanditiis repellendus. Maxime necessitatibus optio nam magni in!
    </p>
  </div>
</div>
</body>
</html>
 
body {
  background: #B2D3E6;
  margin: 0;
  padding: 0;
}
.page {
  width: 250px;
  margin: 100px auto;
  position: relative;
  
  p {
    padding: 10px;
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    border-radius: 3px;
  }
  &:before, &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 3px;
  }
  
  
  
  &:before {
    left: 11px;
    top: 7px;
    transform: rotate(1deg);
    box-shadow: 0 0 15px rgba(0,0,0,.3);
  }
  &:after {
    left: 4px;
    top: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
  }
}
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers