Comment Créer un Effet de Papier Empilé

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      article {
        position: relative;
        margin: 50px auto;
        padding: 40px 0;
        width: 500px;
      }
      article::before,
      article::after {
        content: "";
        width: 490px;
        height: 250px;
        position: absolute;
        left: -2px;
        top: -5px;
        z-index: -1;
        -moz-transform: rotate(-2deg);
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
      }
      article::after {
        exampleleft: 0;
        -moz-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
      }
      article,
      article::before,
      article::after {
        background: #fff;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
      }
      h2,
      p {
        margin: 0 40px 16px;
        padding: 0;
      }
      h2 {
        line-height: 1;
        font-size: 32px;
        font-weight: 700;
      }
      p {
        line-height: 1.2;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <article>
      <h2>Titre de l'article ici</h2>
      <p>Lorem ipsum est un faux texte...</p>
    </article>
  </body>
</html>