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

my profile code by html || shutter animation with hover effect of html-css

                                              My Profile Viewer #CODE :       <!-- Created By Aziz Sobirov --> <!DOCTYPE html> <html>     <head>     <meta name="viewport" content="width=device-width, initial-scale=1" />      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">         <title>Img hover</title>         <style type="text/css">           *{     margin:0;     padding:0;    ...
Post a Comment
Read more

Hide Animation with Hover

How to Hide the Text by HTML with the Hover Effect  So, The Html-Css are the one by using you can bring the change. A lots of Design and Animations you can make through coding.      Here, I done with the Hide Text code, In which The text hide with the mouse pointer and with Animation. It also in the categories of MouseMove Operation. Just do it once and expand your knowledge with codoblog. #CODE                                                     <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1" >   <style type="text/css">   body{   margin: 0;   padding: 0;   min-width: 100vh;   width: 100%;   display: flex;   align-items:center;   j...
Post a Comment
Read more

Html for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more