Garden

organic use of a grid (css grid) —

using grid for a layout doesn't have to look boxy

Illustration from “Magazin Nuremberg” resembling an oval relief oval relief in the east gazebo at Winterthur Museum, Garden & Library

Scale transform on page scroll



code note

Element interaction: scale transform on page scroll

css-tricks.com



art credits

Oval relief illustration: G. H. Bestelmeier, “Magazin von verschiedenen kunst und andern nüzlichen sachen, zur lehrreichen und angenehmen unterhaltung der jugend, als auch für liebhaber der Künste und wissenschaften, welche stücke meist vorrathig zu finden,” 1808–1812. TS2301 B56 TC; courtesy Winterthur Museum, Garden & Library

Winterthur Museum, Garden & Library

grid-area



code note

Grid area: an alternate to explicit grid track placement of an element; a group of individual modules in the grid is formed into a single named area where an element can be placed (rail photo). Other individual grid children (small leaves) populate individual modules by default.

Webflow grid area info



art credits

Photo: dollhouse railings on blue onion skin paper — jmm. Small leaves: vintage b&w engravings 9source unknown).

Vintage engraving of a Venus de Milo statue; original source unknown

Page scroll interaction (transform)



code note

Element transforms on page scroll (move, scale + opacity changes)

Webflow



art credits

Vintage illustration of Venus de Milo statue; original source unknown

keyframe animated linear gradient w rgba values, background images, blend-mode (color-burn)



code note

keyframe animated linear gradient w rgba values, border-radiiwords

Link name goes here



art credits

stepping stones: keyframe animated linear gradient w rgba values, border-radii
.
Background illustrations: chandelier from “Magazin Nuremberg,” 1808, in the collection of the Winterthur Library. Vintage botanical illustrations: original source unknown

Winterthur Museum, Garden & Library

Vintage black and white engraving of a wheelbarrow; artist unknown

Julie Mader-Meersman

(unless otherwise cited).

css dollhouse

code sampler & designscape

garden

organic use of a grid (css grid) —