DEV Community

Cover image for CSS Art: Motorola RAZR V3
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

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:

Top comments (4)

Collapse
 
madsstoumann profile image
Mads Stoumann

Impressive!

Collapse
 
aarone4 profile image
Aaron Reese

Some people have waaaaaay too much down-time ,😁

Collapse
 
jake0011 profile image
JAKE

great work.

Collapse
 
khairunnisaas profile image
Khairunnisaas

awesome!!