Next up: Eric Meyer’s presentation Design in the Background. Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability.
. @meyerweb is using his own website at https://t.co/4wIW2YslfU to demo during this talk so if you want live examples, go check his website. (Also check his website because it’s good.) #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Above the base color, Eric has multiple images, then a gradient that starts at the bottom and goes up until it fades out. That was done through experimentation. Throw in a couple numbers, see what you like, play with things. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
The masthead has a similar fade, which is a linear gradient that fits at 179 degrees. Tilted, it gives a little bit of overlap and gives a more organic feel. Use the arrow keys in the web inspector to fiddle with things until they feel right. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
linear gradient generators exist on the web if you don’t work with them regularly.
The code is compact for text descriptions of images. CSS syntax is images as much as SVGs or pngs are
— Anne Gibson (@perpendicularme) October 11, 2021
one image repeated along the x-axis allows for the wave design without having to have a huge long image.
then the same image again, layered on top, to cover a gap that was displaying.
It looks random and organic but it’s 2 slightly different sized/positioned images.
— Anne Gibson (@perpendicularme) October 11, 2021
For the headers, there’s a wave 9% offscreen to the left and a vertical offset that was found through experimentation. Height is auto-scaled to preserve aspect ratio.
On the other side is a different image wave pinned to the bottom right corner.
— Anne Gibson (@perpendicularme) October 11, 2021
Eric styled mostly mobile-first when he was doing his page design. At the mobile size there’s only 1 wave.
At the desktop sizes there’s the two waves.
Backgrounds don’t have to be this complicated, they can be separated more simply.
— Anne Gibson (@perpendicularme) October 11, 2021
One pixel gradient that fades toward the sides, then a 3pixel gradient on top which fades more quickly, then a few small images, and now it looks like a filagree on the page. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
using currentColor allows the background to match the text color of the blockquote Eric’s showing now, so that it can stand out slightly more.
— Anne Gibson (@perpendicularme) October 11, 2021
Two images with masking around the sides like the wave image in the header. Filled in opaque parts and made the rest translucent. As long as Eric’s careful, they fit with the link and mask out what’s behind them by a tiny bit. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
https://t.co/xxKnBUmMFr is another great resource for seeing single-element pages made of just one div. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
You can make Captain America’s shield with 5 background images and a ::before and an ::after #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
You’re doing all this design on a single element. You don’t have to have 16 wrapper divs to make this work. They’re decorations, so if they don’t load, they don’t load, and when they do load, they look fantastic. [Progressive enhancement!] #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
That talk was so engrossing it felt like 15 minutes passed. Thank you @meyerweb for a great presentation! #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear. An Event Apart OT 2021 Design in the Background by Eric Meyer – Perpendicular Angel Design