HTML/CSS How to achieve a paper effect in CSS for Joplin?

[shivajikobardan]

I want to achieve this effect in Joplin.

I need some CSS for it in userstyle.css.

I've few examples here:

https://freefrontend.com/css-paper-effects/

So, I am wondering if anyone could write a userstyle.css for me. I've gave a try but it's not working.

 /* The below controls how a note displays when printed or exported to pdf. The intention is to make prints primarily black and white. */
    
    
    
     @media print {
         body {
    background-color: #eee;
      position: relative;
      z-index: 0;
      box-sizing: border-box;
      width: 500px;
      margin: 30px auto;
      
      font-family: 'Tangerine', cursive;
      font-size: 26px;
      
      border: 10px solid #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      /* Background lines */
      background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);
      background-size: 100% 1.2rem;
      
      line-height: 1.2rem;
      padding: 1.4rem 0.5rem 0.3rem 3.5rem;
    }
            table th, table td {
             color: #000000;
             border: 1px solid #000000;
            /* black table borders for printing */
             background: #ffffff;
            /* white table background for printing */
        }
         a {
             color: #000000;
             text-decoration: none;
            /* modify hyperlink text */
        }
         .resource-icon {
             background-color: #000000;
            /* makes any linked resource icons black */
        }
         blockquote {
             border-left: 4px solid #000000;
             /* makes the bar at the left of a blockquote black */
             opacity: 1;
             /* makes the blockquote text black */
        }
         code {
             color: #000000;
             font-weight: bold;
            /* bold code text for printing */
        }
         .inline-code {
             color: #000000;
             border: 0px none;
             background: none;
             font-weight: bold;
            /* bold code text for printing and removes the grey background and border*/
        }
         pre.hljs {
             border: 0px none;
             background: #F0F0F0;
             /* removes the border from fenced code blocks and modifies the grey background colour */
       }
         span[class^='hljs-'] {
             color: #000000 !important;
            /* modifies code highlighting colour for printing (all black!!) */
       }
         hr {
             border-bottom: 1px solid #000000;
            /* change horizontal rules to black for printing */
        }
         h1 {
             border: none;
             border-bottom: 1px solid #000000;
            /* change horizontal lines under h1 tags to black for printing */
        }
         mark {
             background-color: #F0F0F0;
            /* sets highlighter ==mark== to grey for printing */
        }
    }

Note that part of code was written to print codes in black and white I just edited the body part here.

 

[jedishrfu]

Here's some folks discussing it in general:

https://stackoverflow.com/questions/14585101/old-paper-background-texture-with-just-css