Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon 

Here is the code for camera icon design..try with your efforts..!

ICON

#CODE : >> 

  

         

<!DOCTYPE html>

<html>

<head>

<title>Camera Icon Creation</title>

<style type="text/css">

body{

margin:0;

background-color: lightblue;

}

.outer{

    width: 50%;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

}

.body{

    background-color: white;

    border-radius: 30%;

    width: 11rem;

    height: 11rem;

    position: relative;

    box-shadow: 1px 1px 6px 1px slategrey;

}

.red{

    border-radius: 50%;

    background-color: crimson;

    width: 10px;

    height: 10px;

    position: absolute;

    top: 10%;

    left: 10%;

    margin: 4px;

}

.flash{

    width: 20%;

    height: 8px;

    border-radius: 25% / 30%;

    background-color: #ccc;

    box-shadow: inset 1px 1px 6px 1px slategrey;

    position: absolute;

    right: 15%;

    top: 10%;

}

.back{

    background-color: #b7b3c1;

    height: 45%;

    justify-self: center;

    display: flex;

    align-items: center;

    margin: 25% 0;

}

.cam{

    border: 8px solid white;

    background-image: linear-gradient(to top, #8612fe 0%, #04b7fa 100%);

    border-radius: 50%;

    position: absolute;

    top: 18%;

    left: 18%;

    justify-self: center;

    margin: 0 auto;

    width: 6rem;

    height: 6rem;

    box-shadow: 0 0 0 1px slategrey;

}

.lens{

    border-radius: 50%;

    width: 3.3rem;

    height: 3.3rem;

    background-image: linear-gradient(to top, #3807ac 0%, #1059d8 100%);

    position: absolute;

    margin: 0 auto;

    justify-self: center;

    display: flex;

    align-self: center;

    top: 22.5%;

    left: 22.5%;

}

.focus{

    width: 60%;

    height: 60%;

    background: #222;

    border-radius: 50%;

    position: absolute;

    top: 20%;

    left: 20%;

    justify-self: center;

    display: flex;

}

.shine{

    border: solid 3px white;

    border-color: #fff transparent transparent transparent;

    

}

</style>

</head>

<body>

<div class="outer">

<div class="body">

<div class="red"></div>

<div class="flash"></div>

<div class="back"></div>

<div class="cam">

<div class="lens">

<div class="focus">

<div class="shine"></div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

#OUTPUT:>>