css dollhouse

code sampler & designscape

 8 – attic  7 – chapel  6 – family archive  5 – yellow suite  4 – studio  3 – library  2 – blue suite  1 – ground floor  rr – rec room  c – cellar



grounds

yard garden future guest house garage fire department

What is this place?

 Foundational Info

Index of Demos

Early 20th century architectural plaster relief of a young person with scrolled neckline

Tiny, hand-embossed blue foil moon ornament with a plain face; from a 19th century French sales sample book in the collection of the Winterthur Library.

Vintage black and white engraving of a small, walking doll wearing a dress; artist unknown

Small green head of a cat made from Cupreous metal from ancient Egypt; in the collection of the Metropolitan Museum of Art

css dollhouse

code sampler & designscape

 8 — attic  7 — chapel  6 — family archive  5 — yellow suite  4 — studio  3 — library  2 — blue suite  1 — ground floor  rr — rec room  c — cellar



grounds

yard garden future guest house garage fire department

What is this place?

 Foundational Info

Index of Demos

Tiny Victorian Valentine sticker with a blackbird carrying a note that says, “remembrance.”

absolute position, spline 3D embed, custom cursor



code note

Moon: made in Spline from NASA glb file, then imported via Webflow’s Spline Scene element (easier than it sounds!).
.
Background image on a combo body class.
.
Valentine: position absolute w skew + rotate transforms.
.
Custom cursor: https://discourse.webflow.com/t/use-a-custom-cursor/28623/3 —OR— https://css-tricks.com/using-css-cursors/

Spline (beginner-friendly 3D design tool)



art credits

Valentine sticker: about 1/2" tall, found in Atlantic Card Co sample book in Winterthur Library.
.
Cursor image (pilot): Photo of old toy by jmm.
.
Moon: colorized in Spline, made from an open source NASA glb file

NASA