Menu

Pure CSS ART - Cute Calf

unknown programmer November 18, 2020
Step 1: Create Index.html File.
 
<!DOCTYPE html>
<html>  
<head>
        <title>Cow</title>
    </head>
    <body>
        <div id="container">
            <div id="head">
            <div id="horn"></div>
            <div id="horn1"></div>
            
            <div id="eye">
                   <div id="eyeball"></div>
               </div>
               <div id="eye1">
                   <div id="eyeball1"></div>
               </div>
                <div id="mouth">
                    <div id="nose"></div>
                    <div id="nose1"></div>
                    <div id="smile"></div>
                </div>
            </div>
            
            <div id="body">
                 <div id="stomach"></div>
            </div>
            <div id="leg">
                <div id="legc"></div>
            </div>
            <div id="leg1">
                 <div id="legc1"></div>
            </div>
             <div id="leg2"></div>
             <div id="toe"></div>
             <div id="f"></div>
             <div id="f1"></div>
              <div id="leg3"></div>
             <div id="toe1"></div>
             <div id="tail">
                 <div id="tailh"></div>
                 <div id="tailtip"></div>
                  <div id="tailti"></div>
             </div>
             <div id="ear"></div>
            <div id="ear1"></div>
            <div id="shadow"></div>
            <div id="shadow1"></div>
            <div id="shadow2"></div>
            <div id="shadow3"></div>
            <div id="shadow4"></div>
              <a id="a" href="https://www.sololearn.com/Profile/19143437/?ref=app">Follow Me</a>
        </div>
       
    </body>
</html>




Step 2: Create Style.css File.


 
body {
    margin:0;
}
#container{
    height:581px;
    width:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center ;
    position:relative ;
    overflow:hidden ;
    background-color:none;
}
#head{
    width: 150px;
    height: 200px;
    background-color:#ffeae0;
    position:absolute;
    left:110px;
    top:80px;
    z-index:999;
    border-radius:84% 81% 60% 49% / 89% 84% 30% 30% ;
}
#head:after{
    content:"";
    position:absolute;
    width:20px;
    height:110px;
    border-radius:50%;
    background-color:#ffeae0;
    top:65px;
    left:-3px;
    transform:rotate(3deg);
}
#head:before{
    content:"";
    position:absolute;
    width:20px;
    height:110px;
    border-radius:50%;
    background-color:#ffeae0;
    top:65px;
    right:-3px;
    transform:rotate(-3deg);
}
#mouth{
     width: 157px;
     height: 60px;
     background-color:#fcaeae;
     border-bottom-left-radius:45px;
     border-bottom-right-radius:48px; 
     border-bottom: 0;
     position:absolute;
     left:-3.5px;
     top:140px;
     z-index:99;
}
#mouth:after{
    content:"";
    position:absolute;
    width:157px;
    height:40px;
    background-color:#fcaeae;
    border-radius:50%;
    left:0;
    bottom:40px;
    transform:rotate(-.5deg);
}
#mouth:before{
    content:"";
    position:absolute;
    width:100px;
    height:20px;
    background-color:#fcaeae;
    border-radius:50%;
    left:25px;
    top:43.8px;
    transform:rotate(1deg);
}
#eye{
    height:23px;
    width:18px;
    background-color:black;
    border-radius:50%;
    position:absolute;
    left:47px;
    top:75px;
}
#eye1{
    height:23px;
    width:18px;
    background-color:black;
    border-radius:50%;
    position:absolute;
    right:47px;
    top:75px;
}
#eyeball{
    height:6.5px;
    width:6px;
    background-color:white;
    border-radius:50%;
    position:absolute;
    top:5px;
    right:2px;
}
#eyeball1{
    height:6.5px;
    width:6px;
    background-color:white;
    border-radius:50%;
    position:absolute;
    top:5px;
    left:2px;
}
#nose{
    height:15px;
    width:25px;
    background-color:#c26e6e;
    border-radius:50%;
    position:absolute;
    top:2px;
    left:25px;
    z-index:999;
    transform:rotate(10deg);
}
#nose1{
    height:15px;
    width:25px;
    background-color:#c26e6e;
    border-radius:50%;
    position:absolute;
    top:2px;
    right:25px;
    z-index:999;
    transform:rotate(-10deg);
}
#smile{
    height: 20px;
    width: 20px;
    border: 5px solid transparent;
    border-top: 5px solid #c26e6e;
    border-radius: 50%;
    position: absolute;
    top:20px;
    right:40px;
    z-index:999;
    transform:rotate(130deg);
}
#smile:before{
     content:"";
     width: 5px;
     height: 5px;
     background-color:#c26e6e;
     border-top-left-radius:5px;
     border-top-right-radius:5px; 
     border-bottom: 0;
     position:absolute;
     top:-1px;
     left:-2px;
     z-index:9999;
     transform:rotate(-130deg);
}
#smile:after{
     content:"";
     width: 5px;
     height: 5px;
     background-color:#c26e6e;
     border-top-left-radius:5px;
     border-top-right-radius:5px; 
     border-bottom: 0;
     position:absolute;
     top:-.5px;
     right:-2px;
     z-index:9999;
     transform:rotate(-220deg);
}

#horn{
    height:15px;  
    width:15px;
    background-color:#ffaf03;
    border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
    position:absolute ;
    left:30px;
    top:-2px;
    transform:rotate(-35deg);
} 
#horn1{
    height:15px;  
    width:15px;
    background-color:#ffaf03;
    border-radius:52% 48% 0% 71% / 100% 100% 0% 0%   ;
    position:absolute ;
    right:30px;
    top:-3px;
    transform:rotate(34deg);
} 
#ear{
    transform:rotate(8deg);
    z-index:-111;
    position:absolute;
    top:82px;
    left:82px;
}
#ear:before{
      content:"";
      width: 50px;
      height: 70px;
      background:#fcaeae;
      border-radius: 100px 0px;
      border:6px solid #4c4c4d;
      position:absolute;
      transform:rotateX(60deg);
      z-index:-1;
}
#ear1{
    transform:rotate(45deg);
    z-index:-111;
    position:absolute;
    top:77px;
    left:270px;
}
#ear1:before{
      content:"";
      width: 50px;
      height: 70px;
      background:#fcaeae;
      border-radius: 100px 0px;
      border:6px solid #4c4c4d;
      position:absolute;
      transform:rotateX(60deg);
      z-index:0;
}
#body{
    height:140px;
    width:140px;
    border-radius:50%;
    background-color:#ffeae0;
    position:relative ;
    top:40px;
}
#stomach{
    width:80px;
    height:70px;
    border-radius:75% 54% 73% 69% / 63% 54% 74% 71% ;
    background-color:rgb(255, 204, 188);
    position:absolute;
    top:40px;
    left:30px;
}
#leg{
    height:120px;
    width:55px;
    background-color:#ffeae0;
    border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
    position:absolute;
    top:270px;
    left:100px;
    transform:rotate(5deg);
    box-shadow:0px -1px 6px rgba(0, 0, 0, 0.050);
}
#leg:after{
    content:"";
    position:absolute;
    left:27px;
    top:110px;
    height: 0px;
    width: 20px;
    border-bottom: 25px solid #4c4c4d;
    border-left: 6px solid transparent;
    border-right: 5px solid transparent;  
    transform:rotate(170deg);  
    border-top-left-radius:10px; 
    border-top-right-radius:10px;    
}
#leg:before{
    content:"";
    position:absolute;
    left:-1.5px;
    top:110px;
    height: 0px;
    width: 23px;
    border-bottom: 27px solid #4c4c4d;
    border-left: 5px solid transparent;
    border-right: 6px solid transparent;  
    transform:rotate(185deg);   
    border-top-left-radius:10px; 
    border-top-right-radius:10px;
}
#leg1{
    height:120px;
    width:55px;
    background-color:#ffeae0;
    border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
    position:absolute;
    top:270px;
    left:205px;
    transform:rotate(-5deg);
    box-shadow:-1px 0px 6px rgba(0, 0, 0, 0.050);
}
#leg1:after{
    content:"";
    position:absolute;
    left:-2.5px;
    top:110px;
    height: 0px;
    width: 20px;
    border-bottom: 25px solid #4c4c4d;
    border-left: 6px solid transparent;
    border-right: 5px solid transparent;  
    transform:rotate(188deg); 
    border-top-left-radius:10px; 
    border-top-right-radius:10px;     
}
#leg1:before{
    content:"";
    position:absolute;
    left:22px;
    top:110px;
    height: 0px;
    width: 23.5px;
    border-bottom: 26px solid #4c4c4d;
    border-left: 5px solid transparent;
    border-right: 6px solid transparent;  
    transform:rotate(175deg);    
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
}
#legc{
    width:56px;
    height:10px;
    background-color:#ffeae0;
    border-radius:50%;
    position:absolute;
    top:103px;
    left:-.5px;
    z-index:9999;
}
#legc1{
    width:56px;
    height:10px;
    background-color:#ffeae0;
    border-radius:50%;
    position:absolute;
    top:103px;
    left:-.5px;
    z-index:9999;
}
#leg2{
    height:90px;
    width:45px;
    background-color:#ffe0d1;
    border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
    position:absolute;
    top:325px;
    left:75px;
    transform:rotate(90deg);
    z-index:-11;
}
#leg2:before{
    content:"";
    height:80px;
    width:40px;
    background-color:#ffe0d1;
    border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
    position:absolute;
    top:5px;
    right:5px;
    transform:rotate(35deg);
    z-index:-11;
} 
#toe{
    height:48px;
    width:21px;
    background-color:#4c4c4c;
    border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
    position:absolute; 
    top:336px;
    left:50px;
    transform:rotateY(20deg);
}
#toe:after{
    content:"";
    height:48px;
    width:21px;
    background-color:#4c4c4c;
    border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
    position:absolute; 
    top:px;
    left:16px;
}
#toe:before{
    content:"";
    width: 32px; 
    height: 16px; 
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px; 
    background: #4c4c4c;
    position:absolute;
    left:2.5px;
    top:40px;
    z-index:999;
    
}
#leg3{
    height:90px;
    width:45px;
    background-color:#ffe0d1;
    border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
    position:absolute;
    top:323px;
    left:233px;
    transform:rotate(240deg);
    z-index:-11;
}
#leg3:before{
    content:"";
    height:80px;
    width:40px;
    background-color:#ffe0d1;
    border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
    position:absolute;
    top:5px;
    right:5px;
    transform:rotate(35deg);
    z-index:-11;
}
#toe1{
    height:48px;
    width:21px;
    background-color:#4c4c4c;
    border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
    position:absolute; 
    top:336px;
    left:275px;
    transform:rotateY(20deg);
}
#toe1:after{
    content:"";
    height:48px;
    width:21px;
    background-color:#4c4c4c;
    border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
    position:absolute; 
    top:px;
    left:16px;
}
#toe1:before{
    content:"";
    width: 32px; 
    height: 16px; 
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px; 
    background: #4c4c4c;
    position:absolute;
    left:2.5px;
    top:40px;
    z-index:999;
    
}
#tail{
    height: 100px;
    width: 200px;
    border: 10px solid transparent;
    border-bottom:10px solid #ffe0d1;
    border-radius: 0 50% ;
    position: absolute;
    top:225px;
    left:55px;
    z-index:-9999;
    transform:rotate(10deg);
}
#tail:before{
    content:"";
    position:absolute;
    height:15px;
    width:15px;
    border: 10px solid transparent;
    border-bottom:10px solid #ffe0d1;
    border-radius:50%;
    top:57px;
    left:8px;
    z-index:999;
    transform:rotate(89deg);
}
#tailh{
    height:35px;
    width:15px;
    background-color:#4c4c4c;
    border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
    position:absolute; 
    top:41px;
    left:2px;
    transform:rotate(0deg);
    z-index:999;
}
#tailh:before{
    height:35px;
    content:"";
    width:15px;
    background-color:#4c4c4c;
    border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
    position:absolute; 
    top:px;
    left:5px;
    transform:rotate(-10deg);
    z-index:999;
}
#tailh:after{
    content:"";
    width: 20px; 
    height: 10px; 
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px; 
    background: #4c4c4c;
    position:absolute;
    z-index:999;
    top:28px;
    left:1px;
    transform:rotate(2deg);
}
#tailtip{
    position:absolute;
    left:3.5px;
    top:33px;
    height:30px;
    width:14px;
    border-radius:50%;
    border-left:5px solid #4c4c4c;
    transform:rotate(18deg);
}
#tailtip:before{
    content:"";
    position:absolute;
    top:.1px;
    left:-.8px;
    height:20px;
    width:5px;
    border-radius:50%;
    border-left:5px solid #4c4c4c;
}
#tailtip:after{
    content:"";
    position:absolute;
    top:3px;
    left:4.6px;
    height:15px;
    width:8px;
    border-radius:50%;
    border-left:5px solid #4c4c4c;
    transform:rotate(-21deg);
}
#tailti{
    width:25px;
    height:13px;
    background-color:#4c4c4c;
    border-radius:50%;
    position:absolute;
    top:57.5px;
    left:5.5px;
    z-index:9999;
    transform:rotate(86deg);
}
#f{
    height:15px;
    width:7px;
    border-radius:50%;
    border-left:5px solid #ffe0d1;
    position:absolute;
    top:335px;
    left:290px;
    transform:rotate(50deg);
}
#f1{
    height:15px;
    width:7px;
    border-radius:50%;
    border-right:5px solid #ffe0d1;
    position:absolute;
    top:335px;
    left:59px;
    transform:rotate(-50deg);
    z-index:-11;
}
#shadow{
    position:absolute;
    width:60px;
    height:.001px;
    z-index:-111;
    border-radius:50%;
    top:400px;
    box-shadow:0px 0px 19px 4px grey;
}
#shadow1{
    position:absolute;
    width:30px;
    height:.001px;
    z-index:-111;
    border-radius:50%;
    top:408px;
    left:110px;
    box-shadow:0px 0px 19px 5px grey;
}
#shadow2{
    position:absolute;
    width:30px;
    height:.001px;
    z-index:-111;
    border-radius:50%;
    top:408px;
    left:220px;
    box-shadow:0px 0px 19px 5px grey;
}
#shadow3{
    position:absolute;
    width:10px;
    height:.001px;
    z-index:-111;
    border-radius:50%;
    top:395px;
    left:80px;
    box-shadow:0px 0px 19px 5px grey;
}
#shadow4{
    position:absolute;
    width:10px;
    height:.001px;
    z-index:-111;
    border-radius:50%;
    top:395px;
    left:270px;
    box-shadow:0px 0px 19px 5px grey;
}
#a{
    width:120px;
    height:25px;
    text-align:center;
    border-radius:10px;
    background-color:#fcaeae;
    position:absolute;
    top:480px;
    text-decoration:none;
    font-size:20px;
    padding:5px;
    padding-top:8px;
    color:white;
    text-transform: uppercase;
    word-spacing:2px;
}



Step 3: Result.


If you found this helpful PLEASE SHARE IT.  You may also find these posts helpful! 
 

To that end, I am only an email away.  Contact me with any questions.

Happy coding,

By Ashwin Maurya ( SoloLearn User )


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ If any Photos/Videos/Article/Blog/Content has an issue with this upload, please contact us and we will remove it immediately. Contact E-Mail :lawtantra@gmail.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Tags
Reactions

Post a Comment

0 Comments

Please do not enter any spam link in the comment box.