https://global.discourse-cdn.com/standard14/uploads/cozic/original/3X/f/1/f18e83ad96b2f3700f1e69c8fc2a58497613dfa6.jpeg<p>I want to achieve this effect in Joplin.<p>I need some CSS for it in userstyle.css.<p>I've few examples here:<p>https://freefrontend.com/css-paper-effects/<p>So, I am wondering if anyone could write a userstyle.css for me. I've gave a try but it's not working.<p><pre><code> /* 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 */
}
}</code></pre>