Lets Build a Phone in CSS
Sometimes people tell me that CSS is hard, and frustrating in cross browsers. I, on the other hand, love playing in CSS! Its a fun challenge for me and can really have instant gratification.
I’d like to go through a tutorial on how to build something common, like a cell phone. Almost everyone has one, it will be fairly easy to connect with the image.
Here is what we will build today.
I’m going to build this in CodePen, but I typically build using either Atom or Sublime. You can build it using any tool that makes you happy and joyful. If you’re IDE does not make you happy, it may be time to find a new one.
I’m going to start with a CSS file.
This step is optional, but I like to set the body of my page to be something other than white, only for the simple reason, its easier on my eyes.
body{
background-color: #f5f5f5;
}This specific color gives off a smokey white color that is just nicer for my eyes and makes focusing on what matters a little more pleasant. You can set the background to any color that you may fancy.
Next, I’m just going to set the foundation of the phone. I am going start by establishing an id of ‘base’. If I were going to use this set of instructions more than one time, I would have used the class selector instead.
#base {}
This is where the black base of the phone is built. The first thing I am going to do here is set this to an absolute, and move it to the spot I want it to rest.
#base{
position: absolute;
top: 205px;
left: 400px;
}Now its time to decide how big this phone is going to be. I am going to set it to have a width of 210px and a height of 360px. No science here, I just like this size in this case. After that, I will decide what color to make the phone. My phone is black, so lets just stick with a solid black foundation #000000;
#base{
position: absolute;
top: 205px;
left: 400px;
width: 210px;
height: 360px;
background-color: #000;
}We now have…a black rectangle. Ta-dah!!!
This looks nothing like a phone. Maybe if we round off the corners a little, that will help.
To do this, we just need to add a border-radius and we’ll shave off that sharp edges.
#base{
position: absolute;
top: 205px;
left: 400px;
width: 210px;
height: 360px;
background-color: #000;
border-radius: 15px;
z-index: 0;
}
Thats better! But wait, what is the line z-index: 0;? Let me explain. On your monitor, when you set a ‘width’ it is being set left to right, and height is top to bottom, but those are not your only options. The z-index allows you to place items on top of each other. Imagine dominoes set up from you to the wall that you are facing. This is the z-index.
Because the foundation will be the furthest back layer, I am setting it at a z-index of 0. We can then layer the remaining items accordingly. Keep in mind, the z-index will only work on positioned elements. Using the position of absolute, I am able to utilize the z-index.
The next thing I am going to add is the image to the phone. I used a picture of my handsome pup, but you are welcome to use any image that you prefer. Alternatively, you can use a plain color background, if that is what you prefer.
I am going to use the id of base2 for this layer, and am also going to set the position to absolute.
#base2{
width: 200px;
height: 350px;
position: absolute;
top: 5px;
left: 5px;
}As you can see, I’ve made the width and the height 10px less than the base of the phone. I want this piece to nestle into the base like the screen would on my phone. I’ve also only made the top and left to move 5px. This is because when we get to the HTML, we are going to place this id nested into the base div.
Our next move to is add the image that you want to display.
#base2{
position: absolute;
top: 5px;
left: 5px;
width: 200px;
height: 350px;
background-image: url("https://carlakroll.com/images/tucker-stump-speech.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 10px;
z-index: 1;
}The background properties are getting used in high gear here.
background-image just has to have the url(“”) with whichever image you want to show off. I chose an image that makes me smile.
Next, I set the background to not repeat. If I did not specify this action, the image could continue to repeat on both the x and y axis. Setting this to ‘no-repeat’ ensures we only have the image display the one time.
Background-size is one that you can play with. I chose cover because it scales the background image to be as large as possible. The image gets cropped, but I am happy with how the image displays. The last piece of the background puzzle that I put together is background-position: center. This may not be a necessity for your image, but for me, I needed to shift the image and setting it to center, placed it in the right place for my taste.
You will also notice that I have set the border radius to 10px and have also included a z-index of 1. This z-index layers the background image right on top of the foundation.
Its time to add the screen to our phone. I am going to set this id to #baseGlass.
#baseGlass{
position: absolute;
top: 5px;
left: 5px;
width: 200px;
height: 350px;
}Check out and compare the start of #baseGlass to the start of #base2. They are exactly the same.
This is redundant and I can’t let this continue!!!
I am going to set a class of .base1 that will be used on both of these divs.
.base1{
position: absolute;
top: 5px;
left: 5px;
width: 200px;
height: 350px;
border-radius: 10px;
}Whew! That’s better! Lets now remove that code from #base2 and #baseGlass:
#base2{
background-image: url("https://carlakroll.com/images/tucker-stump-speech.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
}#baseGlass{}
By setting the same settings to one place, we’ve reduced the risk of an error. The less you write, the better off you’ll be!
Continuing on with #baseGlass. We want this to shine a little. I am going to set a linear gradient to the background color and change some opacity so that we can see the image behind it. To start, we’ll say what we want the background to be.
background: linear-gradient();Now we add the values with the colors we want along with the opacity/alpha. To do this, we will use rgba (Red, Green, Blue, Alpha). I love MDN to find things, and they haven’t failed me in locating a color picker. Just add the numbers to your background.
#baseGlass{
background: linear-gradient(to left, rgba(150,150,150,0.4), rgba(150,150,150,0.1), rgba(255,255,255,0.4), rgba(150,150,150,0.1));
z-index: 3;
}You can see, right before I added the rgba to the background, I added the words “to left, ”. This tells the gradient to set the colors right to left. This is the effect I’m looking for, but you can set it to other options as well.
Finally, for the glass, I set the z-index: 3.
Now its time for the camera and speaker. I’m going to call the speaker #line1. Since we’ve done all of these steps before, this should be pretty easy.
#line1{
position: absolute;
top: 13px;
left: 85px;
width: 50px;
height: 5px;
background-color: #222;
border-radius: 10px;
z-index: 4;
}The position is set to absolute and I moved the top and bottom around to fit on the phone the way I would like to sit. You can see, I’ve also added the z-index and set it to 4. This places the speaker on top of the glass layer. We don’t want the glare from the linear gradient to cover the speaker or the camera.
I’ve decided to just call the camera circle #circle.
#circle1{
position: absolute;
top: 12px;
left: 70px;
width: 8px;
height: 8px;
background-color: #222;
border-radius: 50%;
z-index: 4;
}The biggest difference here is that I’ve changed the border radius to a percentage of 50%. Setting the height and width to the exact same pixels and setting a border radius to 50% will give you a nice circle every single time.
We still need to set up the borders on the top and bottom of the phone. We’ll call this #top-line and #bottom-line.
.borders{
position: absolute;
width: 200px;
height: 30px;
background-color: #000;
z-index: 2;
}#top-line{
position: absolute;
top: 5px;
left: 5px;
}#bottom-line{
position: absolute;
top: 325px;
left: 5px;
}
In here, we have the width, height, background-color, and z-index the same for both borders, so I just made one class that I can add to both. Saves time, lines of code, and errors down the road. Look at the z-index though. Its set to 2. Well, we want the phone glass to lay over those borders, so I set the z-index to lay under the baseGlass. You do not have to set the z-index in order, just keep in mind, organization will save you headaches later!
Lets get that home button taken care of and move on to the HTML! This one will be called #circle2.
#circle2{
position: absolute;
top: 330px;
left: 93px;
width: 25px;
height: 25px;
background-color: #111;
border-radius: 50%;
z-index: 4;
}Again, I set it to an absolute, exact height and width with a border radius of 50% to make a circle and set the top and left to position the circle to the proper place on my phone. You can see that the z-index is set to 4 to again sit on top of the glass layer.
Thats it! We now have a phone! Oh, wait, you can’t see it yet. Well, lets build out our HTML and see what amazing phone we’ve just built.
HTML
We are going to start with our base.
<div id="base"></div>
In our CSS we established an id with a ‘#’, but in HTML, we call that id by name. id=”base”. From here, we are going to nest all of the remaining <div> inside this base <div>.
Lets build this now from the bottom up. We will stack all of the <div> on top of each other as we go.
We have the base, now lets add base2 and the glass:
<div id="base">
<div id ="baseGlass" class="base1"></div>
<div id="base2" class="base1"></div>
</div>
You should be getting an image with a black border and bit of shine to it. Sweet! Now lets add in the borders:
<div id="base">
<div id ="top-line" class="borders"></div>
<div id ="bottom-line" class="borders"></div>
<div id ="baseGlass" class="base1"></div>
<div id="base2" class="base1"></div>
</div>Last but not least, lets throw in the camera, speaker, and the home button:
<div id="base">
<div id ="circle1"></div>
<div id ="line1"></div>
<div id ="circle2"></div>-->
<div id ="top-line" class="borders"></div>
<div id ="bottom-line" class="borders"></div>
<div id ="baseGlass" class="base1"></div>
<div id="base2" class="base1"></div>
</div>
You should now have a phone built completely in HTML and CSS!
Just for full reference, here is the complete css code, you can also find this on my CodePen:
body{
background-color: #f5f5f5;
}#base{
position: absolute;
top: 205px;
left: 400px;
width: 210px;
height: 360px;
background-color: #000;
border-radius: 15px;
z-index: 0;
}.base1{
position: absolute;
top: 5px;
left: 5px;
width: 200px;
height: 350px;
border-radius: 10px;
}#base2{
background-image: url("https://carlakroll.com/images/tucker-stump-speech.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
}#baseGlass{
background: linear-gradient(to left, rgba(150,150,150,0.4), rgba(150,150,150,0.1), rgba(255,255,255,0.4), rgba(150,150,150,0.1));
z-index: 3;
}#line1{
position: absolute;
top: 13px;
left: 85px;
width: 50px;
height: 5px;
background-color: #222;
border-radius: 10px;
z-index: 4;
}#circle1{
position: absolute;
top: 12px;
left: 70px;
width: 8px;
height: 8px;
background-color: #222;
border-radius: 50%;
z-index: 4;
}.borders{
position: absolute;
width: 200px;
height: 30px;
background-color: #000;
z-index: 2;
}#top-line{
top: 5px;
left: 5px;
}#bottom-line{
top: 325px;
left: 5px;
}#circle2{
position: absolute;
top: 330px;
left: 93px;
width: 25px;
height: 25px;
background-color: #111;
border-radius: 50%;
z-index: 4;
}
Hopefully, this gives you some motivation to build out other fun things in CSS and HTML. Once you get a good handle on standard CSS, you can start looking into CSS animations, and even dip into the world of JavaScript!
In the next blog post, I’ll be adding a little JavaScript/jQuery so that we can hide the image and show the phone’s home screen.
Until next time! Have an amazing day!
