Hello readers,
This tutorial I am creating a 2d character using CSS3 and HTML5.
In case you need to create any such character this code will be helpful for you.
So lets follow the code below.
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.man_Block {
position: fixed;
height: 100%;
width: 100%;
top:0px;
left:0px;
z-index:99999999;
}
.man-body {
width: 60px;
height: 92px;
margin: 0 auto;
top:50%;
left: 50%;
position: absolute;
}
.cap {
height:25px;
background:#ea3a28;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
position: relative;
}
.cap .capfold {
background: none repeat scroll 0 0 #df3220;
border-radius: 2px;
box-shadow: 0 0px 1px #cf2d1c;
height: 20px;
left: -4px;
position: absolute;
top: 25px;
width: 67px;
text-align: center;
color:#fff;
font-size: 12px
}
.shave {
background:#4d2f1c;
width: 60px;
height: 50px;
margin-top: 20px;
border-bottom-left-radius:40px;
border-bottom-right-radius:40px;
position: relative;
}
.eyesBlcok {
background: none repeat scroll 0 0 #f8a324;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 16px;
left: 4px;
position: absolute;
width: 52px;
}
.eyesBlcok .nose {
background:#f8a324;
border-radius: 15px;
bottom: -5px;
height: 10px;
left: 21px;
position: absolute;
width: 8px;
z-index: 99999999;
}
.eyesBlcok .eyes {
margin-left: 9px;
margin-top: 3px;
border-image: none;
border-radius: 5px;
border-style: none solid solid;
border-width: 0 2px 2px;
border-top-left-radius:0px;
border-top-right-radius:0px;
height: 8px;
width: 9px;
}
.eyesBlcok .eyes.RT {
margin-left: 34px;
margin-top: -8px;
}
.shave .mouth {
border: 2px solid #f8a324;
border-radius: 80px;
height: 10px;
left: 15px;
position: absolute;
top: 25px;
width: 10px;
}
.shave .ears {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
height: 5px;
left: -2px;
position: absolute;
top: 5px;
width: 2px;
background:#f8a324;
}
.shave .ears.RT {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
left: 60px;
top: 5px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<div class="man_Block">
<div class="man-body">
<div class="cap">
<div class="capfold">K</div>
</div>
<div class="shave">
<div class="eyesBlcok">
<div class="eyes LT"></div>
<div class="eyes RT"></div>
<div class="nose"></div>
</div>
<div class="mouth spaceOutUp" data-test="spaceOutUp" rel="nofollow"></div>
<div class="ears LT"></div>
<div class="ears RT"></div>
</div>
</div>
</div>
</body>
</html>
Output generated by using above code
There is no image used here in output, it's purely HTML5 and CSS3 code generated output.
0 Comment(s)