2-div Cell Phone (CSS Art)

#css #webdev #html #tutorial

Hello!

Today, we're going to create a cell phone with just a little HTML and CSS! In this post, you will learn more than just how to produce some cool art. You'll be learning how to use various CSS properties and features in more interesting ways than you be accustomed to.

All you need is divs!

Okay, so maybe don't sing that, but let's start with 2 divs:

   <div>
      <div>

      </div>
   </div>

Yes, all you need for this is two divs, no classes necessary. Thanks to the cascading nature of CSS, you can rely on location of your divs to determine their style.

Let's set up the canvas:

We'll set a variable that can be shared by the case and buttons.

:root {
/*shared color for the case and buttons*/
  --case-color: rgb(28, 28, 28);
}

body {
  background-color: rgb(135, 135, 235);
  margin: 0;
  padding: 0;
}

Creating the phone:

The parent <div> will form the phone screen, the sheen of the screen, the rim, and the case. The child <div> will form the buttons, volume up/down and power.

/*Screen*/
div {
  background-color: rgb(35, 35, 35);
  border: 3px solid rgb(85, 35, 135);
  border-bottom-width: 18px;
  border-radius: .735vh;
  border-bottom-radius: 3.736vh;
  box-shadow: 0 2px 0 5px var(--case-color);
  height: 63.5vh;
  margin: 15vh auto 15vh auto;
  position: relative;
  width: 36.5vh;
}

/*Case*/
div::after {
  background-color: black;
  border: 1px solid rgba(235, 235, 235, .2);
  border-radius: 100%;
  box-shadow: 0 0 3px rgba(0, 0, 0, .6);
  content: '';
  left: calc(53.5% - 15px);
  position: absolute;
  right: calc(53.5% - 15px);
  top: 1.265vh;
  height: 10px;
  width: 10px;
  z-index: 1;
}

/*Sheen*/
div::before {
  content: '';
  background-color: rgba(235, 235, 235, .2);
  bottom: 49.765%;
  display: flex;
  filter: blur(8px);
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 49.765%;
  transform: rotate(-65.5deg) skewX(43.5deg) scaleX(1.936);
}

/*The second div forms all the buttons:*/
div div {
  background-color: var(--case-color);
  border:none;
  border-radius: 5px 18px 18px 5px;
  box-shadow: none;
  height: 3vh;
  position: absolute;
  right: -1.125vh;
  top: 1.5%;
  width: .5vh;
  z-index: 1;
}

div div:after,
div div::before {
  background-color: var(--case-color);
  border-left: 0;
  border-radius: 5px 18px 18px 5px;
  box-shadow: none;
  content: '';
  height: 3vh;
  position: absolute;
  width: .5vh;
  transform: none;
}

/*We need to override a couple
properties from the previous
declaration*/
div div::after {
  border: none;
  left: 0;
  height: 3.5vh;
  right: -.115vh;
  top: 4vh;
}

div div::before {
  filter: none;
  right: -.125vh;
  top: -4vh;
}

Hope you've enjoyed this! Look out for more CSS tutorials in the future! If you do give it a shot, share and let me know!

Source on CodePen: https://codepen.io/rolandixor/pen/ZEydGbj

Update:
*There was a bit of unfinished detail about Flexbox in the body that slipped through in a previous version of this article. My apologies. It's actually not necessary and was since removed! The parent div is positioned via margin:, so there's no need for using Flexbox in this instance.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.