CSS Art: Motorola RAZR V3

Ok, maybe the RAZR is not the best flip phone ever, but it was iconic - and I say that not only because I had one. It was one of the most popular cell phones in the mid-2000s.

The other day, the kids went to sleep early, and I decided to do some CSS art. I picked up the RAZR because it is relatively easy to draw, and I didn't think I'd have much time anyway. So I used this photo from CNET as the base to trace on.

You can see the result in this demo on CodePen:

Some details about this drawing:

• It is responsive: open the demo on CodePen, resize the window, and see how the phone changes size. The cell phone was so iconic that you could also turn it into a CSS icon. (Note: this wouldn't be recommended or encouraged, this drawing is not really efficient.)
• It is (slightly) interactive: the phone screen goes to sleep after 10 seconds, and it wakes up after pressing any of the buttons (which are also somewhat animated.)
• It doesn't open (and I won't make it open): it is flat and would look awkward... plus it would take time.
• It has glitches in some browsers: the outline of the battery/bars is done with drop-shadow, so it doesn't look great on Safari; and the phone wake-up is controlled using :has(), which is not supported on Firefox. The phone won't wake up on that browser (RIP RAZR). And both of them have issues with the blue notch below the screen 😓
• The phone has some texture: it is not perfect (and one of the reasons why it is highly inefficient), but if you look closely, you may notice some horizontal lines simulating a metallic texture. I did a similar effect on this volume knob drawing (but it is more subtle here.)
• The picture on the screen is also 100% CSS! It is a different CSS drawing that I did a few years back (based on this picture on Unsplash) using only clip-path: