Create a stack of punched paper overlaying each other with-CodePudding

I want those black dots with papers shown here:

body {
  background: linear-gradient(#ccc, #fff);
  font: 14px sans-serif;
  padding: 20px;
}

.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 40px;
  position: relative;
  width: 80%;
  background: radial-gradient(#575450 6px, #fafafa 7px) repeat-y;
  background-size: 30px 30px;
}

.letter:before,
.letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}

.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}

<div>

  <div class="letter">
    <hr>
    <h3>introduction.js</h3>
    <p>Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.3.0.</p>
    <h3>Standalone Distribution</h3>
    <p>The releases page has links to download the standalone distribution, which contains everything you need to start running Jasmine. After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the <head> of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.</p>
    <hr>
  </div>

</div>

To achieve such graphic design I used radial-gradient with repeat-y like this on the paper:

background: radial-gradient(#575450 6px, #fafafa 7px) repeat-y;
background-size: 30px 30px;

But as you see, this ruins the solid background of the paper and I get a transparent paper instead of a solid white paper. This is important and causes issues if you want to put another stack of papers just over the current one right??

You can see through each paper...

How can I get such effect without loosing the solid background of the paper?

CodePudding user response：

You could make the radial gradient end (at the outer part) be pure white, and similarly with the background-color.

This snippet spells out the various background settings to make it a bit clearer (ie so one background: doesn't overwrite another).

body {
  background: linear-gradient(#ccc, #fff);
  font: 14px sans-serif;
  padding: 20px;
}

.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 40px;
  position: relative;
  width: 80%;
  background: radial-gradient(#575450 6px, #fafafa 7px, #ffffff 8px 100%) repeat-y;
  background-size: 30px 30px;
  background-color: #ffffff;
}

.letter:before,
.letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}

.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}

<div>

  <div class="letter">
    <hr>
    <h3>introduction.js</h3>
    <p>Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.3.0.</p>
    <h3>Standalone Distribution</h3>
    <p>The releases page has links to download the standalone distribution, which contains everything you need to start running Jasmine. After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the <head> of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.</p>
    <hr>
  </div>

</div>

CodePudding user response：

You could add an element that contains the holes while applying a solid background to the .letter element:

<div>

  <div class="letter">
    <div class="page-holes"></div>
    <hr>
    <h3>introduction.js</h3>
    <p>Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.3.0.</p>
    <h3>Standalone Distribution</h3>
    <p>The releases page has links to download the standalone distribution, which contains everything you need to start running Jasmine. After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the <head> of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.</p>
    <hr>
  </div>

</div>