<div></div>
:root {
--size: 200px;
--width: var(--size);
--height: calc(var(--size) * 1.5);
--bg0: #cc9966;
--bg1: #f0dfd3;
--bg2: #e6c4c0;
--frame1: #6e522b;
--frame2: #584738;
--frame3: #5c4524;
--frame4: #372915;
--frame5: #463b2e;
--blind1: #fff;
--blind2: #ddd;
--blind3: #888;
--blind-handle: #000;
--blind-string: #fff;
--paper-bg: #f6f9fc;
--paper-line: #9facb1;
--paper1: #9facd1;
--paper2: #9fdcb1;
--paper3: #e7ece4;
--paper4: #dfccb1;
--paper5: #efacb1;
--shadow: rgba(0, 0, 0, 0.4);
--highlight: #00f3;
}
body {
margin: 0;
width: 100vw;
height: 100vh;
background: var(--bg0);
background-image:
radial-gradient(circle at 40px 55px, transparent 0 10px, var(--paper1) 0 12px, transparent 0 15px, var(--paper2) 0 17px, transparent 0),
radial-gradient(circle at 13px 55px, transparent 0 5px, var(--paper4) 0 7px, transparent 0),
radial-gradient(circle at 67px 55px, transparent 0 5px, var(--paper4) 0 7px, transparent 0),
radial-gradient(circle at 1px 55px, transparent 0 3px, var(--paper5) 0 5px, transparent 0),
radial-gradient(circle at 79px 55px, transparent 0 3px, var(--paper5) 0 5px, transparent 0),
linear-gradient(transparent 30px, var(--paper-bg) 0 32px, var(--paper-line) 0 34px, var(--paper-bg) 0 76px, var(--paper-line) 0 78px, var(--paper-bg) 0 80px, transparent 0),
linear-gradient(transparent 0 calc(50% + 130px), var(--frame5) 0 calc(50% + 150px), var(--bg0) 0),
linear-gradient(to right, var(--bg1) 50%, var(--bg2) 0);
background-size: 80px 100px, 80px 100px, 80px 100px, 80px 100px, 80px 100px, 100px 100%, 100px 100%, 100px 100%;
background-position: center top, center top, center top, center top, center top, center center, center center, center center;
background-repeat: repeat-x;
overflow: hidden;
}
div {
position: absolute;
display: block;
border: 0;
border-radius: 0;
box-sizing: border-box;
width: 200px;
height: 300px;
min-height: 300px;
max-height: 450px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -150px;
resize: vertical;
overflow: auto;
outline: none;
background-image:
linear-gradient(var(--frame1) 10px, transparent 0 180px, var(--frame1) 0 200px, transparent 0 275px, var(--frame1) 0 290px, var(--frame4) 0 291px, var(--frame2) 0 300px, transparent 0),
linear-gradient(to right, var(--frame1) 12px, transparent 0 188px, var(--frame1) 0),
linear-gradient(135deg, transparent 10%, white 0 15%, transparent 0 20%, white 0 35%, transparent 0),
linear-gradient(var(--paper3), var(--paper3));
background-repeat: no-repeat;
background-size: 200px 300px;
cursor: default;
box-shadow:
-100px 300px var(--bg0),
100px 300px var(--bg0),
-30px 291px var(--frame3),
-25px 290px var(--shadow),
30px 291px var(--frame3),
25px 290px var(--shadow),
-1px 0 3px var(--shadow),
1px 0 3px var(--shadow),
12px 12px 0 12px var(--frame3),
-12px 12px 0 12px var(--frame3),
/* -60px 280px var(--frame5),
60px 280px var(--frame5), */
-10px 30px 0 30px var(--bg1),
10px 30px 0 30px var(--bg2),
0px 29px 0 30px var(--shadow),
0px -5px 0 30px var(--frame3);
}
div::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(transparent, transparent),
linear-gradient(var(--blind-handle), var(--blind-handle)),
linear-gradient(var(--blind-handle), var(--blind-handle)),
linear-gradient(to right, transparent 184px, white 0 187px, transparent 0),
linear-gradient(to right, transparent 193px, white 0 196px, transparent 0);
background-size: 50px 50px, 10px 15px, 10px 15px, 200px 250px, 100% 100%;
background-position: bottom right, 181px 250px, bottom right, top left, top left;
background-repeat: no-repeat;
filter: drop-shadow(-1px -1px 3px);
}
div::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-image:
repeating-linear-gradient(var(--blind1) 0 2%, var(--blind2) 6.5%, var(--blind3) 0 6.666%);
background-size: 196px clamp(30px, calc(900px - 200%), 290px);
background-position: 2px 0;
background-repeat: no-repeat;
}
div:hover::after {
background-image:
linear-gradient(var(--highlight), var(--highlight)),
linear-gradient(var(--blind-handle), var(--blind-handle)),
linear-gradient(var(--blind-handle), var(--blind-handle)),
linear-gradient(to right, transparent 184px, var(--blind-string) 0 187px, transparent 0),
linear-gradient(to right, transparent 193px, var(--blind-string) 0 196px, transparent 0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.