Windows 7 Sticky Note
A recreation of the sticky notes widget from Windows 7 in all its original six colours.
- The font used is Caveat.
<div class="winsticky">
<div class="ws_top"></div>
<div class="ws_content">This is a sticky note.</div>
</div>
<div class="winsticky yellow">
<div class="ws_top"></div>
<div class="ws_content">This is a sticky note.</div>
</div>
<div class="winsticky green">
<div class="ws_top"></div>
<div class="ws_content">This is a sticky note.</div>
</div>
<div class="winsticky blue">
<div class="ws_top"></div>
<div class="ws_content">This is a sticky note.</div>
</div>
<div class="winsticky purple">
<div class="ws_top"></div>
<div class="ws_content">This is a sticky note.</div>
</div>
<div class="winsticky pink">
<div class="ws_top"></div>
<div class="ws_content">This is a sticky note.</div>
</div>
/* Windows 7 Sticky Note - www.kazimariusz.com */
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
.winsticky {
--color-top:#F5F5F5;
--color-background-start:#FFFFFF;
--color-background-end:#EBEBEB;
}
.winsticky {
font-family: "Caveat", cursive;
font-size:24px;
min-width: 225px;
min-height: 206px;
display: inline-flex;
flex-direction: column;
box-shadow: 0px 2px 5px #000;
}
.winsticky .ws_top {
background-color: var(--color-top);
height: 35px;
position: relative;
line-height:0px;
}
.winsticky .ws_top:before {
position: absolute;
left:16px;
top:12px;
content: url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="2" x="0" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="10" x="4" y="0" fill="hsl(0, 0%, 0%)"></rect></svg>');
}
.winsticky .ws_top:after {
position: absolute;
inset:0px;
left:calc(100% - 27px);
top:11px;
display:block;
content:"";
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAMhJREFUKFNtkkENwkAURF/vKMABIkABNYAAEIAAigAEUAFVwJULiCCQcEUBAugsf5rtpv/ys/kzs/Nnt+Jf8+if6FMtYaoAr6NfgTdQEgXeAl1OOIfssSe3QRJQYprtgIsItqRBHQANH8AiB0vEBJNmwClI3iMp22ZOMGAJ3OIgoAjDTiVBnuVX9lzaqfGhtGSwQB2wAQ7ACrg7VvvPwUrJ5fSSNd+gjDWQ532v/MrSUxDP2KX1O1h9lEhBkr3GBKmovhOvPPomP5tVKmelHKPVAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
}
.winsticky .ws_top:before, .winsticky .ws_top:after {
opacity:0.5;
}
.winsticky .ws_content {
background: linear-gradient(var(--color-background-start) 0%, var(--color-background-end) 100%);
flex-grow: 1;
position: relative;
padding:6px 5px;
}
.winsticky .ws_content:after {
position: absolute;
right:4px;
bottom:4px;
content:url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" x="9" y="0" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="1" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="1" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="0" y="9" fill="hsl(0, 0%, 0%)"></rect></svg>');
opacity:0.3;
line-height:0px;
}
/* Colours */
.winsticky.white {
--color-top:#F5F5F5;
--color-background-start:#FFFFFF;
--color-background-end:#EBEBEB;
}
.winsticky.yellow {
--color-top:#f8f7b6;
--color-background-start:#fefecc;
--color-background-end:#fcf9a1;
}
.winsticky.green {
--color-top:#c5f7c1;
--color-background-start:#d2ffcc;
--color-background-end:#ade3aa;
}
.winsticky.blue {
--color-top:#c9ecf8;
--color-background-start:#d9f3fb;
--color-background-end:#afd0e8;
}
.winsticky.purple {
--color-top:#D4CDF3;
--color-background-start:#DEDAFE;
--color-background-end:#C6B8FE;
}
.winsticky.pink {
--color-top:#EDC0ED;
--color-background-start:#F4CFF4;
--color-background-end:#E6A8E6;
}