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: