ashenshadow

Resources

The internet was made for sharing, and no one would be half the developer that they are if it wasn't for all the free and shared resources available to the public. Please enjoy these code snippets and feel free to modify them however you see fit.

Polaroid

Add a cute polaroid frame around your photos with text on the bottom border

notes html css

*Cat not included

The bottom band is the caption: the thick lower border is the <figcaption>'s padding (18px 8px 22px). Keep a <figcaption> (even an empty one) or you lose the Polaroid shape; min-height holds the band open.
Square crop: aspect-ratio: 1 / 1 + object-fit: cover crop any photo to a square without stretching it. Drop aspect-ratio to keep the photo's original proportions.
Tilt: the polaroid--tilt class rotates the photo a fixed -3deg. For a scattered look, give each photo its own angle instead (e.g. a rotate-left / rotate-right utility class, or :nth-child rules).

The structure: a <figure> wrapping your photo and a <figcaption> for the handwritten label — swap in your own image and caption text.

<figure class="polaroid">
    <img src="your-photo.jpg" alt="your photo"/>
    <figcaption>A polaroid photo</figcaption>
</figure>

The look: asymmetric padding fakes the Polaroid border (thin top/sides, thick bottom), object-fit squares off the photo, and a hover lifts it. Customize the colors and font to make it your own!

.polaroid {
    display: inline-block;
    box-sizing: border-box;
    max-width: 260px;
    margin: 1rem;
    padding: 14px 14px 0; /* thin frame on top + sides; bottom band below */
    background: #fdfcf7; /* warm photo white */
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04),
                0 8px 18px rgba(76, 76, 124, 0.28);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.polaroid > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.polaroid > figcaption {
    font-family: cursive;
    font-size: 1.4rem;
    line-height: 1.15;
    text-align: center;
    color: #4c4c7c;
    /* the tall bottom band that makes it read as a Polaroid */
    padding: 18px 8px 22px;
    min-height: 20px;
}

.polaroid--tilt {
    transform: rotate(-3deg);
}

.polaroid:hover {
    transform: rotate(0) translateY(-4px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04),
                0 14px 26px rgba(76, 76, 124, 0.35);
}

Date Stamp

Add a date stamp to let others know when you finished a book or further customize it to display your own cool stats

notes html css

date read 22 07 · 2026

Rating → fill: the stars are two stacked ★★★★★ layers; the top (filled) one is clipped to --pct, set inline on .star-rating-fill. The formula is rating ÷ 5 × 100 → 3★ = 60%, 4.5★ = 90%. Half-stars and decimals work.
Tilt: --stamp-tilt (default -7deg) is the "hand-pressed" angle. Set it to 0deg for a straight stamp, or vary it per stamp for a scattered look.
Unique arc id per stamp: if you put more than one stamp on a page, give each <path> a different id (and matching href), or every stamp's text will bend around the first one's arc.
Accessibility: update the aria-label on .date-stamp when you change the date/rating — the SVG and star layers are aria-hidden, so that label is the only thing a screen reader announces.

The structure: an outer <div class="date-stamp"> circle, an <svg> band for the curved text, and a <div class="date-stamp-inner"> stack — label, day, month/year, and the star rating. Copy the whole block; the circle and svg aren't optional.

<div class="date-stamp" role="img" aria-label="Read July 22, 2026, rated 3 out of 5">
    <svg viewBox="0 0 150 150" aria-hidden="true">
        <path id="date-stamp-arc-0" d="M 8,79 A 67,67 0 0 0 142,79" fill="none"></path>
        <text><textPath href="#date-stamp-arc-0" startOffset="50%" text-anchor="middle">my website</textPath></text>
    </svg>
    <div class="date-stamp-inner">
        <span class="date-stamp-label">date read</span>
        <span class="date-stamp-divider"></span>
        <span class="date-stamp-day">22</span>
        <span class="date-stamp-my">07 · 2026</span>
        <div class="star-rating" role="img" aria-label="3 out of 5 stars">
            <span aria-hidden="true">★★★★★</span>
            <span class="star-rating-fill" style="--pct:60%" aria-hidden="true">★★★★★</span>
        </div>
    </div>
</div>

The look: a two-ring postmark — a solid outer border plus a dashed ::before ring, with the curved text riding the channel between them via an SVG textPath. --stamp-tilt sets the angle. Customize the text, colors, and font to make it your own!

.date-stamp {
    position: relative;
    z-index: 2;
    flex: none;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid #56507f;
    border-radius: 50%;
    color: #56507f;
    --stamp-tilt: -7deg;
    transform: rotate(var(--stamp-tilt));
    transform-origin: center;
}

/* Dashed inner ring; the gap to the solid outer ring is the text channel. */
.date-stamp::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1.5px dashed #ababf2;
    border-radius: 50%;
    pointer-events: none;
}

/* Curved text riding the channel between the two rings. */
.date-stamp svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.date-stamp svg text {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    fill: #8a83bd;
}

.date-stamp-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date-stamp-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.62rem;
}

.date-stamp-divider {
    display: block;
    width: 50%;
    border-top: 1px solid #cdc6ec;
    margin-top: 0.25rem;
}

.date-stamp-day {
    font-family: monospace;
    font-size: 2.2rem;
    line-height: 1;
}

.date-stamp-my {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.date-stamp .star-rating {
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-top: 2px;
}

/* Stars: five ★ glyphs live in the HTML; the fill
   layer sits on top, clipped to --pct (rating ÷ 5 × 100). */
.star-rating {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #c4bce6; /* empty stars */
}

.star-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pct, 0%);
    overflow: hidden;
    color: #56507f; /* filled stars */
}

As Seen On... (this website)

This website was made with some of the following resources. A huge thanks to all the creators that share with the rest of the interweb.

Icons & Blinkies

Coco's Pixel Safari: A cool collection of favicons, blinkies, dividers, and other resources
Identity Buttons: A collection of buttons that can be used to identify yourself
Glitter Graphics: A collection of graphics that can be used in your own projects

Code & Website Inspiration

Tiny notes: Inspiration for the tiny notes, receipt style on the homepage
Neko no Kuni: The website that convinced me I needed to do this

Services

Neocities: Where this website is hosted, of course
Moon Phase widget: Powers the moon phase widget on the homepage
Tinylytics: Basic analytics -- powers the visitor count & kudos
Deploy to Neocities: How I avoid using the on-site web editor and push code from my IDE
Atabook Guestbook: Powers the guestbook which is injected via iframe
Basin: Form submission aggregator used on the book tracker page for suggestions
tamaNOTchi: For those of us nostalgic for the Tamagotchis we all let starve

Navigation