Skip to main content

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:>> 















Labels:

Comments

Post a Comment

The Most Populer

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html>     <html>         <head>             <title></title>         </head>         <body>             <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>             <button style="width:150px;             height:40px;             color: red;             -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>             <style type="text/css">                 body{     ...
Post a Comment
Read more

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...
Post a Comment
Read more