Mobile Drawing using HTML and CSS

So do you want to make a mobile drawing? Great move. In today's tutorial we will make a mobile drawing. Let us see how you can do it using only HTML and CSS.

Before starting the tutorial, I want to tell you that this type of CSS art is not used anywhere in reality. I have made this tutorial here to have fun with CSS properties with you. So let's explore some new aspects of CSS properties.

Below is a live demo that will help you understand how the look css mobile.

Live demo:

HTML

CSS

JS

Result

Project folder structure:

Let us set up the project folder before we start coding. Name your main folder "Mobile Drawing". Create the following 2 files inside this folder:

• index.html - This file will contain the HTML structure of your project.
• style.css – This file will contain all the CSS styles that will make your design look great on mobile.

This simple structure keeps your project organized. If you have difficulty in creating the project folder then you can see this tutorial.

HTML:

We will start by creating the HTML structure. Copy the HTML code provided and paste it into your index.html file.

<div class="container">
  <div class="mobile">
    <div class="top-item">
      <div class="display">
        <div class="eye">
          <span>X</span>
          <span>X</span>
        </div>
        <div class="mouth"></div>
      </div>
      <div class="button"></div>
    </div>
  </div>
</div>

This HTML code creates a cute cartoon style mobile design with a face displayed on its screen.

• The background container is a soft pink circular area, centered in the browser window.
• The mobile body is a tall, rounded rectangle with a white front, a thick navy-blue border, and an inset shadow on the left side for depth.
• A :before pseudo-element adds a smaller front panel with shading to the 3D look.
• At the top of the phone, there’s a small navy-blue camera lens, a horizontal speaker bar, and a tiny microphone hole, all made using the .top-item element and its pseudo-elements.
• The display screen is a bright sky blue rectangle with rounded corners.
• On the screen, a pair of cartoon eyes ("X" letters) sit near the top.
• At the bottom of the phone, a small rectangular button.

StyleSheet (CSS):

Once the HTML is in place, it’s time to add some style with CSS. Copy the CSS code given and paste it into your style.css file to bring your mobile design to beautiful.

.container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  border-radius: 100%;
  height: 400px;
  background: #ffcaec;
}

.mobile {
  width: 215px;
  height: 400px;
  background: #fff;
  position: absolute;
  border-radius: 40px;
  border: 4px solid #010072;
  top: -14%;
  left: 23%;
  z-index: 5;
  box-shadow: inset -13px 0px 0 #0000001f;
}

.mobile:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 400px;
  background: #fff;
  border-radius: 40px;
  top: -5px;
  left: -5px;
  border: 4px solid #010072;
  box-shadow: inset -4px -6px 0px 0px #0000001f;
}

.top-item,
.top-item:before,
.top-item:after {
  position: absolute;
  background: #010072;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}

/*camara*/
.top-item {
  width: 8px;
  height: 8px;
  top: 10px;
  left: 45%;
}

/*speaker*/
.top-item:before {
  content: "";
  width: 40px;
  height: 5px;
  top: 20px;
  left: 45%;
}

/*mic*/
.top-item:after {
  content: "";
  width: 5px;
  height: 5px;
  top: 20px;
  left: -35px;
}

.display {
  top: 30px;
  transform: translate(-50%, -0%);
  border: 4px solid #010072;
  width: 165px;
  left: 6px;
  border-radius: 10px;
  height: 300px;
  position: absolute;
  background: #28b6f6;
  box-shadow: inset 7px 8px 0 #0000001f;
}

.eye {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: #010072;
  position: absolute;
  top: 100px;
  left: -45px;
}

.eye span{
  margin-left: 70px;
}

.eye span:before {
  content: "";
  width: 25px;
  height: 15px;
  border-radius: 100%;
  position: absolute;
  top: 30px;
  background: #ff80d1;
}

.mouth {
  position: absolute;
  top: 135px;
  left: 62px;
  width: 35px;
  height: 15px;
  background: #ff1581;
  border: 4px solid #010072;
  box-shadow: inset 7px 8px 0 #0000001f;
}

.button {
  top: 50px;
  transform: translate(-50%, 300px);
  border: 4px solid #010072;
  width: 60px;
  left: 6px;
  border-radius: 10px;
  height: 20px;
  position: absolute;
  background: #fff;
  box-shadow: inset 0px -6px 0 #0000001f;
}

Must watch this CSS art:
• Dog Animation using HTML and CSS
• Elephant Animation using HTML and CSS
• CSS Camera Drawing

Today we are ending the mobile drawing tutorial here, and if you have any questions about the CSS Drawing, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏