Just think, creating a camera with CSS. What did you think? its possible.
Today we will create a camera illustration without using any images, without using any heavy graphics, just using small CSS codes.
A square box will become the camera body. A circle will become the camera lens. And if you give it a little shadow, it will seem like there is a real camera inside the browser.
Today's tutorial we will do CSS illustration again. Earlier we made a CSS illustration of an elephant. But here we are trying something a little different. However, this type of project is rarely used in the practical world. Still, if you are curious about new CSS properties like me. Then let's have some fun.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below.
HTML:
Without wasting time, let's start with the HTML code. Before creating the camera structure, we need to know about the parts of the camera. We will divide the camera structure into two parts. The upper part is where the camera's flashlight, shutter button and other buttons will be.
Below this will be the camera body. The camera body has been divided into three parts. The camera lens will be in the center part of the body.
<div class="camera">
<div class="top-bar">
<div class="button-1"></div>
<div class="button-2"></div>
<div class="button-3">
<div class="box"></div>
</div>
<div class="button-4"></div>
</div>
<div class="body">
<div class="top">
<div class="small-galss"></div>
<div class="flash">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
</div>
<div class="center">
<div class="dot"></div>
<div class="lens">
<div class="glass"></div>
</div>
</div>
<div class="bottom"></div>
</div>
</div>Each of the elements that we will use to create the camera parts has been given a class. Using those classes, we will design the camera parts. So the image below shows what classes we are going to use to create the camera parts.
| Class Name | Description |
|---|---|
| .camera | The main container of the camera which will contain all the parts of the camera. |
| .button-1, .button-2, .button-4 | The elements are located on the top of the camera body. We will use them to create two dials and a shutter button. |
| .button-3 | The camera will be in the middle on the top of the body. It will be given the design of viewfinder. |
| .small-galss | A small glass element, the viewfinder. |
| .flash | The camera flash component, with: .box-1 and .box-2: Internal elements representing flash light. |
| .dot | A LED indicator. |
| .lens | Main camera lens. |
StyleSheet (CSS):
Next, we style the elements created by HTML to give them camera shape.
Setting up the body:For the document body, we have used a soft pink for a light feel. By default, the browser adds some margin and padding to the body. Therefore, to remove these, we set margin and padding to 0.
body {
margin: 0;
padding: 0;
background: #ffe1ff;
}Then we need to center the main container. We will center the main container using the transform method here, so that all the elements will be together.
.camera {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}Here, we set the camera size 500*350px. The background will set soft pink color (HEX-CODE: #ffc9eb), where the dark-blue border camera will be blown. Border radius of 100 pixels will be given to smooth the edges of the camera body. Box shadow will also be used to give 3D look.
.body {
width: 500px;
height: 350px;
background: #ffc9eb;
border: 6px solid #102e41;
border-radius: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: inset -12px 0px 0 0px #63636326;
}We divide the inner body of the camera into three parts. The first one is the top part. Now we are styling this part. We set the width of the camera body to 500px, so we will set it to 500*100px. To make this part stand out from the body, we add the background color blue with HEX-CODE #80edff.
So here is a problem, you will see that the top two corners are going outside the camera body. So we will use Border Radius 96px 96px 0 0 to smooth the top two corners.
We use a pseudo-element (.top:before) to add a highlight bar on the camera body. Set it to 70*230px and a transparent white background color.
.top {
width: 500px;
height: 100px;
border-bottom: 6px solid #102e41;
background: #80edff;
border-radius: 96px 96px 0 0;
display: flex;
justify-content: space-between;
box-shadow: inset 0px 9px 0 0px #ffffff87, inset -12px 0px 0 0px #63636326;
}
.top:before {
width: 70px;
height: 230px;
left: 49px;
top: 32px;
position: absolute;
content: "";
background: #ffffff80;
border-radius: 100px;
}After styling the top part of the body, you might think that we should style the center part. But here we will not style the center part. We style the bottom part.
Set the bottom part the same size and background color as we did for the top part. The only changes will be its position and border radius. In the border radius, we set the top part to the opposite value. Which is 0 0 94px 94px. And add a box shadow.
.bottom {
width: 500px;
height: 80px;
background: #80edff;
border-top: 6px solid #102e41;
border-radius: 0 0 94px 94px ;
box-shadow: inset -12px 0px 0 0px #63636326,
inset -1px -17px 0 0px #63636326;
}Using this, we create a dark circular glass that will be 50*50px in size. We use box shadow to create a white ring on the inside it. Set the Z index to 5 so that it does not get buried under the body.
.small-galss {
width: 50px;
margin-left: 50px;
margin-top: 25px;
height: 50px;
background: #17263c;
border: 6px solid #102e41;
border-radius: 100%;
box-shadow: inset 0 0 0 6px #fff;
z-index: 5;
}Create two rectangular boxes inside the flash. Keep the first one plain (.box-1) and the second (.box-2) one a bright white inset using border and box shadow.
.flash {
width: 150px;
height: 50px;
background: #47c7e8;
border: 6px solid #102e41;
border-radius: 10px;
margin-right: 73px;
margin-top: 32px;
display: flex;
justify-content: space-between;
}
.box-1,
.box-2 {
width: 40px;
height: 20px;
margin: auto;
}
.box-2 {
background: #04233b;
border: 6px solid #102e41;
box-shadow: inset 0 0 0 4px #fff;
border-radius: 4px;
}
.box-1 {
background: #04233b;
margin: auto;
}Using this element, we create a small white circle with a dark border that will look like an LED light on the camera body.
.dot {
width: 20px;
height: 20px;
position: absolute;
background: white;
top: 40%;
left: 20%;
border-radius: 100%;
border: 6px solid #102e41;
}With this element (.lans) we will create a large circular camera lens with a dark inner part. Inside this element there is another element (.glass). We use the glass element to create shadows. For highlights and reflective spots we will use the pseudo-elements which will create a shiny effect on the lens.
.lens {
width: 220px;
height: 220px;
position: absolute;
background: white;
top: 23%;
left: 28%;
border-radius: 100%;
border: 6px solid #102e41;
box-shadow: 12px 11px 0 0px #63636326;
}
.glass {
margin: 14px;
width: 180px;
border: 6px solid #102e41;
height: 180px;
border-radius: 100%;
background:#142941;
box-shadow: inset 0 0 0 5px #b8f5ff,
inset -20px -16px 0 20px #537189;
}
.glass:after,
.glass:before {
position: absolute;
content: "";
background: #ffffffb5;
border-radius: 100%;
}
.glass:after {
width: 60px;
height: 60px;
left: 45px;
top: 45px;
}
.glass:before {
width: 30px;
height: 30px;
left: 135px;
top: 135px;
}There are four elements inside (.top-bar). With these elements we will create the camera controller dials and buttons. First, a small rectangular dial will be created with two elements. Then, create the viewfinder with the third element (.button-3). Inside which there will be a white inset box. The last one will be created like a mode dial using border radius.
.top-bar {
display: flex;
justify-content: flex-start;
}
.button-1,
.button-2,
.button-3,
.button-4{
border-top: 6px solid #102e41;
border-left: 6px solid #102e41;
border-right: 6px solid #102e41;
background: white;
border-radius: 20px 20px 0 0;
position: absolute;
}
.button-1{
width: 60px;
height: 25px;
top: -30px;
left: 89px;
}
.button-4 {
width: 60px;
height: 20px;
top: -25px;
left: 339px;
}
.button-2{
width: 20px;
height: 20px;
top: -25px;
left: 165px;
}
.button-3 .box {
background: white;
width: 45px;
border: 6px solid #102e41;
height: 15px;
border-radius: 10px;
margin: 20px;
}
.button-3{
width: 100px;
height: 55px;
top: -60px;
left: 203px;
background:#ffc9eb;
border-radius: 40px 40px 0 0;
box-shadow: inset 5px 5px 0 0px #63636326;
}I am not a camera expert so I might misidentify the camera part. If you are a camera expert and you see any part name wrong then definitely comment me. This tutorial is just to explore CSS properties and not to give any camera information. That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!
Post a Comment