Lab notes on using CSS and HTML to build a poster

Lab work

A slightly interactive image montage using JS, CSS and HTML

Lab notes

For users:

1. Click on the image or the link above
2. If you have a mouse, move it around the screen
3. Enjoy watching the image tilt and stretch

For developers:

Theme 1: Generating an Open Graph image in the browser

1. Rather than using Photoshop I'm experimenting with using CSS and img tags to make a photo montage
2. Notice the PNG mask on top of the JPG and the CSS where I've pixel pushed them both around
3. To generate the og:image for this size, I'll resize my browser to 1200 x 630px and screenshot it

Theme 2: A little experimenting with 3D CSS

1. I hadn't heard of the perspective attribute in CSS before, so there's some experimentation with that
2. I didn't apply a translateX in the end because I didn't want to effect the og:image screenshot
3. However a bit of translateX does play well with the perspective, perspective-origin, rotateY and rotateX

Theme 3: Updating CSS vars using Javascript

1. I've been meaning to do this since Lea Verou demonstrated them years ago
2. The basic idea is to track the mouseover event with JS and update a custom-property in your CSS
3. Have the JS write something from 0-1 and then calc() lets you keep the visual tweaking inside the CSS

The code is here