Quiero esos puntos negros con papeles que se muestran aquí:
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> Para lograr dicho diseño gráfico, utilicé radial-gradient con repeat-y como esta en el papel:
background: radial-gradient(#575450 6px, #fafafa 7px) repeat-y; background-size: 30px 30px;Pero como ven, esto arruina el fondo sólido del papel y obtengo un papel transparente en lugar de un papel blanco sólido. Esto es importante y causa problemas si desea colocar otra pila de papeles justo encima de la actual, ¿no?
Puedes ver a través de cada papel...
¿Cómo puedo obtener tal efecto sin perder el fondo sólido del papel?
Puede hacer que el extremo del degradado radial (en la parte exterior) sea de color blanco puro, y de manera similar con el color de fondo.
Este fragmento explica las diversas configuraciones de fondo para que quede un poco más claro (es decir, para que un fondo: no sobrescriba otro).
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>Puede agregar un elemento que contenga los agujeros mientras aplica un fondo sólido al elemento .letter :
<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>