STYLING MY NOTES PAGE
How I styled my NOTES using CSS.
⇣ Styling the sticky note / Adding a circle sticker on top of the image / Styling drop shadows / Styling the date stamp / Adding a secondary font
The inspiration
The look-and-feel of my blog is heavily inspired by tactile ephemera of the past: Think handwritten note cards, pink rubber erasers, typewriters, etc.
A good website for this (in which you can even purchase said items) is Present /&/ Correct. They actually have a storefront in London, which I never managed to make my way to. I've always wanted to buy something from this shop, but I told myself I can't buy new things until I use what I already have.
Present /&/ Correct shop near the British Museum. Photo by Nick from Building Narratives (Source).
I've been hauling my stationery from country to country. The last time I bought properly bought stationery is when I lived in Hong Kong. Ever since then, envelopes and stickers have been collecting dust inside my desk drawer. I hope to remedy this when I get more acquainted with my penpals and eventually send them actual snail mail!
Anyway, this is an image from the shop that inspired the current look of my post-it notes:
Simple yet beautiful. Image from presentandcorrect.com
Styling the sticky note
I learned* how to create repeating lines in CSS so you don't have to! If you're interested in other types of stripes, such as slanted or even radial, check out that link because I won't be covering it here.
*i.e., searching using the correct key words, finding the right code, copying and pasting into CSS.
After trying many different color ways, I decided to stick with light blue lines against a yellow background.
background: linear-gradient(
to bottom,
#b8d9e3,
#b8d9e3 6%,
#faf1af 6%,
#faf1af
);
background-size: 100% 20px;
}
I had to play around with the background size to adjust the width of the lines. I added this section under .notes ul.embedded.blog-posts li (as shown below).
CSS
/* Post-it Notes */
.notes ul.embedded.blog-posts li {
display: block;
position: relative;
max-width: 500px;
flex-direction: column;
padding: 0em 1.2em 2em 1.2em; /* reduced top padding */
box-shadow: 0px 5px 5px #c7c2a3;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-secondary), var(--font-chinese);
color: #333;
font-size: 18pt;
line-height: 1.3em;
letter-spacing: -1px;
background: linear-gradient(
to bottom,
#b8d9e3,
#b8d9e3 6%,
#faf1af 6%,
#faf1af
);
background-size: 100% 20px;
}
Adding a circle sticker on top of the image
I am very proud of this! I am a maximalist when it comes to all things, so after my achieving my goal of prettifying my sticky note, I thought, what else? What more can I add?!
This was a journey that I don't even remember anymore, just hours in front of the computer, searching this and that, racking my brains, until I stumbled upon this forum. The power of :before! After that, it was figuring out which element I needed to target to get this to happen. I'm a drop-shadow fiend so you bet I slapped a box-shadow on this sucker.
/* Adding circle sticker before image */
.notes ul.embedded.blog-posts li:has(img):before {
content: '';
position: absolute;
left: 2em;
margin-top: 10px;
background-color: #b0fa02;
border-radius: 50%;
box-shadow: 0px 0px 3px #78a60d;
height: 2.25em;
width: 2.25em;
}
Styling drop shadows
And on that note, this is how style my drop shadows for that pseudo-realistic look. This tutorial from CSS Tricks works is amazing and also taught me how to create an inner shadow (as seen in my fake music player on my NOW page).
- Post-its:
box-shadow: 0px 5px 5px #c7c2a3; - Circle stickers:
box-shadow: 0px 0px 3px #78a60d; - Images:
box-shadow: 0 0 3px #333;
There is a way to create a shadow for only one side of an element, but I just tried it right now and I still like my original version (what I have now). But feel free to try it!
Also, rather than go with a default #666666 grey color, I use a tone that is a darker version of the main color. It's more subtle that way.
Styling the date stamp
Originally this date stamp was huge. I made the font smaller and bolder because it looked more sophisticated. This typeface, Special Elite, doesn't have a bold weight, but you can achieve this by adding 900 to the font-weight.
This was one of my first Bear Blog coding endeavors, so I used ChatGPT to figure out how to align the element properly.
/* Date styling of embedded posts */
.notes ul.embedded.blog-posts li time {
position: absolute; /* position relative to the <li> */
right: 1.2em; /* same as li padding to line up */
bottom: 1.5em; /* same as li padding for spacing */
font-weight: 900;
text-transform: uppercase;
text-align: center;
font-weight: none;
font-style: normal;
color: red;
margin-top: 5px;
font-family: var(--font-main);
font-size: 11pt;
letter-spacing: 0px;
border: 2px solid red;
border-radius: 4px;
width: 100px;
height: 28px;
padding: 0px 5px 0 5px;
rotate: 4deg;
white-space: nowrap; /* prevent wrapping */
}
Adding a secondary font
This page was the introduction to a secondary font: Cedarville Cursive! I wanted the notes to feel handwritten and was also getting bored of seeing the typewriter font everywhere.† If we're going for pseudo-realism, one would scribble down a note haphazardly, would they not?
† This is probably what makes me a "bad" graphic designer—I use too many fonts and drop shadows.
I wanted a font that was a close match to my handwriting, which is the one you see now. It's not perfect, sometimes it's more difficult to read, but isn't that with anybody's handwriting? I can't remember how often I read someone's handwriting anymore, and it's starting to become a dying skill. Anyway, that's just my defense for using this font! ʕ·ᴥ·ʔ
Even though we're all de-googling our lives (I'm still slow to doing this), I am using a Google font because it's web-ready. Here are the steps:
- Go to the font page you want, click on Get font.
- Click Get embed code.
- Select @import radial button.
- Copy the @import url, skipping the
<style>. - Paste it to the top of your CSS theme.
- Create a secondary font under
:root:
--font-secondary: 'Cedarville Cursive', cursive;
Now you can use that font throughout your site! Like this:
font-family: var(--font-secondary), var(--font-chinese);
And, that's all! I'm pretty satisfied with my NOTES and probably won't change it for a while. Lately, I've been wanting to change the way my photos and captions are styled. I spoke about this with a few bloggers a while back and some gave me tips. So perhaps that will be my big next project.
If you have any questions, feel free to contact me! Happy customizing.