I made a silly little page just for myself, to use offline, but I figured I could share in case it sparked inspiration or helped someone with a tricky bit of code, so here it is!
I would not recommend using this for a public-facing page because of a series of problems I'll list below, but feel free to grab it for yourself and/or frankenstein it in any way you see fit =)
Features
Purely HTML and CSS.
Each bookmark-like "tab" is a filter, only showing the items of the corresponding category.
Each item can be in as many categories as you want.
"Post-its" automatically color-coded depending on their category.
"Polaroids" show text on mouse hover, emulating notes taken on their back.
Arrow automatically added after links to help recognize them as links.
Colors for post-its and tabs easily changed.
Font file directly on the site, ensuring most users see the same font.
Limitations
Dubious adaptation to different screen sizes (the items are doing fine, the tabs very much not once the screen gets too small); definitely not mobile-friendly.
Colors picked to my taste with no care for accessibility standards.
Font picked to my taste with no care for accessibility standards.
"Back" side of the "polaroids" only appears on mouse hover, can't work on touch-screen or with keyboard navigation.
Impossible to select or click anything on the "back" of the "polaroids".
I genuinely don't know if the slight animated effect when you mouse over a "polaroid" can cause accessibility problems, better double-check that if you want to use it!
If you have any question about how this works, don't hesitate to ask =)
PS: I saw someone else sharing a bit of code for a tape effect, I considered trying to make one at some point then decided I liked it enough without it, but apparently there's a scrapbook vibe going around xD
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
carisma_sensei
no subject
Date: 2025-06-08 07:41 pm (UTC)I made a silly little page just for myself, to use offline, but I figured I could share in case it sparked inspiration or helped someone with a tricky bit of code, so here it is!
I would not recommend using this for a public-facing page because of a series of problems I'll list below, but feel free to grab it for yourself and/or frankenstein it in any way you see fit =)
Features
Limitations
Direct links: HTML • CSS • Font • Background image 1 • Background image 2
If you have any question about how this works, don't hesitate to ask =)
PS: I saw someone else sharing a bit of code for a tape effect, I considered trying to make one at some point then decided I liked it enough without it, but apparently there's a scrapbook vibe going around xD