I am in search of a way to create those distinctive black dots with papers displayed 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>In order to achieve this specific visual design, I utilized radial-gradient with repeat-y applied to the paper like shown below:
background: radial-gradient(#575450 6px, #fafafa 7px) repeat-y;
background-size: 30px 30px;
However, as evident from the outcome, this disrupts the solid background appearance of the paper, resulting in a transparent effect rather than a consistent white paper look. This issue becomes critical when trying to stack additional papers on top of each other, doesn't it?
The transparency allows visibility through each layer...
Is there a method to maintain the solid background of the paper while achieving this desired effect?