samples of CSS journal-style
@qualquercoisa945 @doctormagikarp
a sample of how it may render - all browsers are slightly different, i've tried to make it reasonably compatible
body{
background-image:radial-gradient(#edb,#a85);
background-size:.1cm .1cm;
}
sufficiently small radial gradient, when repeated in square shapes, creates an illusion of fabric threads -- any text put directly on such background is gonna be less readable
.pin{
width:20px;
height:20px;
border-radius:50%;
margin:.5cm;
background-color:#dd1e1e;
box-shadow:
inset .5px .5px 1.5px 0 #ffb5b5,
inset 0 0 10px -5px #ffb5b5,
-8.5px -8.5px 1.5px -8px #ffb5b5,
-7px -7px 6px -3px #e76d6d,
10px 6px 6px -3px #5e0d0d,
-2px -2px 4.5px 4px #dd1e1e,
.5px .5px 1.5px 6.5px #951414,
3px 3px 1.5px 1.5px #262000,
9px 1px 4px 2px #262000,
17px 7px 10px 4px #3e3500;
box-shadow:
inset .5px .5px 1.5px 0 #ffb5b5,
inset 0 0 10px -5px #ffb5b5,
-8.5px -8.5px 1.5px -8px #ffb5b5,
-7px -7px 6px -3px #e76d6d,
10px 6px 6px -3px #5e0d0d,
-2px -2px 4.5px 4px #dd1e1e,
.5px .5px 1.5px 6.5px #951414,
3px 3px 1.5px 1.5px #262000,
9px 1px 4px 2px #262000dd,
17px 7px 10px 4px #3e3500dd;
}
the first option for the box shadow is a backup for those browsers that don't render partly transparent colours; the second option looks better, but won't be rendered in older browsers.
.postit{
background-color:#dd0;
background-image:
radial-gradient(transparent,#ffd700ee),
linear-gradient(transparent,#ffd742dd 25% 65%,transparent)
;
display: block;
margin: 30px;
width: clamp(150px,400px,calc(100% - 50px));
min-width: 200px;
max-width: calc(100% - 50px);
min-height: 200px;
padding: 10px;
padding-left: 60px;
border-radius: 5px;
box-shadow:
1px 3px 4px 2px #964,
inset 0 0 50px -20px #cce5ff;
color: #1a1a1a;
font-size: 20px;
letter-spacing: .5px;
font-variant: small-caps;
font-family: cursive;
word-spacing: .4em;
line-height: 1cm;
hyphens: auto;
vertical-align:middle;
}
.lined{
padding:15px;
padding-right:3.1cm;
background-position-y:15px;
margin:10px;
border-radius: 4px;
min-height:4cm;
background-color: #f5deb3;
background-image:linear-gradient(#dba 1px,transparent 1px 1em);
background-image:
linear-gradient(#dba 1px,transparent 1px 1em);
background-image:
linear-gradient(270deg,transparent 2.9cm,#f006,transparent 3cm),
linear-gradient(#dba 1px,transparent 1px 1em)
;
background-size:100% 2em;
box-shadow:
inset 0 0 40px 0 #d2b48c,
2px 5px 4px 0 #853;
color: #00001a;
font-size: 1em;
line-height:2em;
}
.lined p{margin:2em .5em;padding:0}
the first versions of background image is here to provide a backup for somewhat older browsers - it doesn't have the red margin line because i got lazy writing it
.patch{
width:6cm;
min-height:4cm;
max-width:80%;
margin: 1cm;
padding: 30px;
background-color: #bb7e3e;
background-image:radial-gradient(circle,#b57230,transparent);
background-size:.15cm .2cm;
border-radius: 25px;
border: 2px dashed #392106;
box-shadow:
0 0 10px -2px #392106,
inset 0 0 10px 2px #392106,
inset 0 0 21px 0 #eeaa82,
0 0 0 5px #bb7e3e,
0 0 3px 5.5px #ea6,
2px 5px 15px 2px #320;
color: #181a16;
font-weight: bolder;
text-align: center;
}
the "fabric structure" of the patch is simplified for the sake of browser compatibility. it's possible to target specific browsers with slightly different code that'd render more realistic leather in each, but that's a lot of code -- (two semi-transparent repeating linear gradients at different angles, repeats of a radial gradient to make it "shine", some play with the blending modes, and then a shape distortion strategy that's different for different browsers, to make it look more like a natural texture) -- so i've replaced it with something simple here. optionally, one could a second radial gradient on top, one with smaller bits of a slightly brighter colour, with different positions set for each layer of the background - to make the current texture look more shiny.
.tape{
margin-left: 30%;
width: clamp(20%,35%,40%);
min-width: 20%;
max-width: 40%;
min-height: 30px;
display: block;
margin-right: 20%;
transform: rotate(359deg);
padding: 10px;
border-radius: 3px;
background-color: #8a4;
background-color: #6B8E2388;
background-image:
linear-gradient(90deg,#B8860B44,transparent 20% 75%,#B8860B44),
linear-gradient(#B8860B44,transparent 10% 85%,#B8860B44),
repeating-linear-gradient(transparent 0 .5px,#cca2 1.5px 2px,transparent 3px 3.5px),
repeating-linear-gradient(90deg,transparent 0 .5px,#bb62 1.5px 2px,transparent 3px 3.5px);
box-shadow:
-3px 0 2px #888814,
3px 0 2px #888814,
3px 1.5px 4px #964,
inset 0 0 14px -3px #745407;
color: #000;
font-size:2em;
letter-spacing: 1.2px;
font-variant: small-caps;
font-family:cursive;
text-align: center;
}
.ruler{
width:15cm;
max-width:86%;
display: block;
z-index: -1;
margin: .5cm;
transform: rotate(358deg);
height: 100px;
background-color: #0339f8ee;
background-image:
repeating-linear-gradient(90deg,transparent 0 0,#0f0009 .8mm .9mm,transparent 1mm 1mm),
repeating-linear-gradient(90deg,transparent 0 4mm,#0f0009 4.2mm 4.8mm,transparent 5mm 5mm),
repeating-linear-gradient(90deg,transparent 0 9mm,#0f0009 9.2mm 9.8mm,transparent 10mm 10mm);
background-size: 100% 20px, 100% 25px, 100% 35px;
background-repeat: no-repeat;
background-position: top;
background-blend-mode: multiply;
filter: contrast(102%);
border-radius: 4px;
box-shadow:
inset 0 -1px 3px -1px #003e,
inset 1px 40px 15px -15px #cae1ffaa,
inset 1px -1px 3px -.5px #003e,
-.5px 1px 1.5px #003e,
inset 3px -3px 3px -1px #cae1ffee,
inset -2px -6px 4px 1px #1464f4ee,
-3px -2px 4px -1px #1464F444,
4px 4px 6px 1px #0037;
opacity: .75;
text-align: center;
font-variant:small-caps;
font-size:2em;
font-family:monospace;
}
.ruler p{padding: 1.1cm}
this one was one of my first CSS-cliparts, and right now i'm too lazy to check the code, so i advise to check it for browser compatibility.
i'd appreciate it if the websites / blogs that use this code - could please link this post somewhere unobtrusive / reblog it, so that more people can use this code as well.
i'd like a prettier internet ;3
(i also have code for other office supply stuff / effects, but this post is long enough already)
