CSS Poster

Lab notes

The experiment: A slightly interactive image montage using JS, CSS and HTML

1. Follow the link above
2. If you have a mouse, move it, otherwise tap around
3. Enjoy watching the image tilt and stretch

Dev notes:

Theme 1: Open Graph image built in the browser

1. HTML and CSS rather Photoshop to make a photo montage
2. A PNG mask on a JPG and CSS to pixel push
3. I screenshot my window at 1200 x 630px to get the og:image

Theme 2: 3D CSS

1. The perspective attribute in CSS
2. translateX not used in this example due to bad effect on og:image
3. Try with perspective, perspective-origin, rotateY and rotateX

Theme 3: Javascript setting CSS vars

1. Lea Verou demonstrated this years ago 🤩
2. Track mouseover with JS and update a CSS custom-property
3. JS should write values 0-1 and CSS should convert using calc()

The code is here and the demo is here. Enjoy!