CSS properties in play
- Layout 001: Flying into LAX
- grid-template-columns
- grid-template-rows
- z-index
- Layout 002: The Park
- grid-template-columns
- grid-template-rows
- grid-template-areas
- Layout 003: Bonaventure Hotel
- grid-template-columns
- min-height
- Layout 004: Santa Monica Pier
- grid-template-columns
- min-height
- position (relative, absolute)
- Layout 005: Brown Pelican Mural,
Venice
- grid-template-columns
- media query
- object fit
- Layout 006: Walt Disney Concert Hall #1
- grid-template-columns
- auto-fit
- minmax
- multi-column
- media query, orientation landscape
- object fit
- Layout 007: Walt Disney Concert Hall #2
- grid-template-columns
- grid-template-areas
- media query
- Layout 008: Walt Disney Concert Hall #3
- grid-template-columns
- grid-template-areas
- object-fit
- :first-of-type
- :last-of-type
- ::first-letter
- :nth-of-type
- Layout 009: Walt Disney Concert Hall #4
- grid-template-columns
- grid-template-areas
- object-fit
- :first-of-type
- ::first-letter
- max-height
- svg filter
- transition
- Layout 010: Color palettes,
Santa Monica mountains
- grid-template-columns, percentages
- grid-template-rows
- object-fit
- nth-of-type
- Layout 011: Swatch color palettes
- grid-template-columns
- auto-fit
- minmax
- Layout 012: Interaction of Color,
Joseph Albers
- grid-template-columns
- grid-template-rows
- flexbox
- animate.css
- filter
- css animation
- nth-child
- Layout 013: Swiss poster
- grid-template-columns
- grid-template-rows
- max-height
- transform
- attribute selector
- z-index
- Layout 014: Disney Hall
- grid-template-columns
- grid-template-rows
- css shapes
- clip path
- Layout 015: LA Audubon Bird palettes
- grid-template-columns
- grid-template-rows
- flexbox
- Layout 016: Santa Monica Mountain Colors
- grid-template-areas
- Layout 017: Extinction Rebellion street posters
- grid-template-columns
- grid-template-rows
- minmax
- max-width
- multi-column
- svg fill
- Layout 018: Extinction Rebellion essay
- grid-template-columns
- grid-template-rows
- multi-column
- object-fit
- svg fill
- Layout 019: Liberty and the Heart of LA 2018
- grid-template-columns
- grid-template-rows
- grid-template-areas
- object-fit
- Layout 020: cicLAvia street photographer
- grid-template-areas
- object-fit
- ::first-line
- :nth-of-type
- Layout 021: cicLAvia Families,
Heart of LA
- grid-template-areas
- grid-template-columns
- object-fit
- flexbox
- minmax
- multi-column
- Layout 022: cicLAvia peace sign,
Heart of LA
- grid-template-areas
- grid-template-columns
- linear-gradient
- picture
- srcset
- Layout 023: Easter Bluejay: How to Draw 28 Birds in
Harper's Style
- grid-template-columns
- grid-template-areas
- shape-margin
- shape-outside
- :first-of-type
- ::first-line
- ::first-letter
- Layout 024: ciclavia we love our police
- grid-template-columns
- grid-template-rows
- font-feature-settings
- :first-of-type
- ::first-line
- ::first-letter
- Layout 025: Charley Harper,
American illustrator
- grid-template-columns
- grid-template-rows
- grid-template-areas
- shape-margin
- shape-outside
- Layout 026: Flock of Blue Jays,
Greensock animation
- grid-template-columns
- grid-template-rows
- max-height
- max-width
- object-fit
- svg
- Layout 027: LA Ice Rink
- grid-template-columns
- grid-template-areas
- object-fit
- svg
- img srcset
- Layout 028: Burrowing Owl: How to Draw 28 Birds in
Harper's Style
- grid-template-rows
- transition
- svg
- Layout 029: For Lemmy
- grid-template-columns
- grid-template-areas
- Layout 030: Interaction of Color,
ver 2
- grid-template-columns
- grid-template-rows
- z-index
- filter
- flexbox
- animation
- greensock
- Layout 031: Our days begin and end as stories
- grid-template-columns
- content
- ::before
- ::after
- chinese, japanese, spanish and english
- splitting.js
- Layout 032: Bumblebeelovesyou Mural
- grid-template-columns
- transform
- Layout 033: LA Noir,
Raymond Chandler
- grid-template-columns
- object-fit
- flexbox
- multi-column
- content::before
- Layout 034: Palms Street Art. Women reading
book.
- grid-template-columns
- object-fit
- Layout 035: Sidewalk art
- grid-template-columns
- grid-template-areas
- object-fit
- nth-of-type
- Layout 036: Las Virgenes View Trail
- grid-template-columns
- font-feature-settings
- flexbox
- object-fit
- nth-of-type
- Layout 037: Soul of a Nation
- grid-template-columns
- object-fit
- multi-column
- text-indent
- Layout 038: Men love Annie. coffee shop art.
- grid-template-columns
- grid-template-areas
- object-fit
- object-position
- Layout 039: Extinction Rebellion skull poster
- grid-template-columns
- fill
- z-index
- svg
- Layout 040: Extinction Rebellion butterfly
poster
- grid-template-columns
- grid-template-rows
- z-index
- svg
- Layout 041: Extinction Rebellion hourglass
poster
- grid-template-columns
- grid-template-rows
- z-index
- object-fit
- svg
- fill
- Layout 042: Extinction Rebellion global warming
dead plant poster
- grid-template-columns
- grid-template-rows
- z-index
- object-fit
- svg
- stroke
- mix-blend-mode
- Layout 043: Gorillas
- min-height
- svg
- Layout 044: Union Station
- compound grid
- min-height
- srcset
- Layout 045: CC Fest
- CSS shapes, transforms and animations
- grid-template-areas uses emoji
- media query changes grid
- Layout 046: fractional unit and image study
- scaling grid of 1fr, 2fr, 4fr, 6fr. images use vh object-fit and object-position