Pure CSS art is cool! Built a phone component, with scrolling background

Pure CSS art is cool! Built a phone component, with scrolling background
0

#1

While working on some cool gizmos for my Product Landing Page, I learned some interesting little techniques with layered gradients and layered box-shadow. Turns out you can do a heck of a lot with a single div! So I made a little phone, which can display stuff on its screen, and has a scrolling background: https://codepen.io/vivshaw/full/YOvJmM/

If you wanna learn how to do this, I picked the techniques up from Lynn Fisher’s article here, who made the super neat A Single Div. In short, you can stack multiple transparent gradient backgrounds and multiple box-shadows to assemble complex stuff out of one basic shape.

For context on why I’m working on this, I’m ultimately hoping to refine the CSS phones into something I can use similar to the sweet animated device elements on the top of the iPhone XR landing page. If anybody has any tips or resources on the animation side of things, I’d love to hear them! I really don’t have a good handle on clean, performant, mobile-friendly animations yet.