CSS MINECRAFT CHARACTER

CSS MINECRAFT

HTML:

	<html>

	<head>
	<tite></tite>
	</head>

	<body>

	<div class="all">

	<div class="head">

	<div class="hair1"></div>

	<div class="eye"></div>

	<div class="hair2"></div>
	</div>

	<div class="bat">

	<div class="chest">

	<div class="c1"></div>

	<div class="c2"></div>

	<div class="c3"></div>
	<div class="c4"></div>

	</div>

	</div>

	<div class="hand1"></div>
	<div class="hand2"></div>

	<div class="leg1"></div>
	<div class="leg2"></div>
	</div>

	</body>

	</html>

view raw minecraft.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: #cccc;
	}

	.all {
	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);
	}

	/head-part/

	.head {
	width: 110px;

	height: 110px;

	background: linear-gradient(#eda435 0px 50px, #fdde80 50px 110px);
	position: fixed;
	z-index: 2;
	}

	.head:after {
	position: absolute;

	content: " ";

	width: 44px;

	height: 110px;

	background: #c3561f;

	left: -44px;

	transform: skewY(-40deg);

	top: 18.7px;
	}

	.head:before {
	width: 111px;

	height: 35px;

	position: absolute;

	content: " ";

	background: #794843;

	top: 110px;

	transform: skewX(-50deg);

	left: -22px;
	}

	.hair1 {
	width: 44.5px;

	height: 13px;

	background: #fdde80;

	position: absolute;

	top: 38px;

	left: 45px;

	border-right: 0.5px solid #554f4f;
	z-index: 3;
	}

	.hair1:before {
	width: 19.5px;

	height: 11.5px;

	background: #fdde80;

	position: absolute;

	content: " ";

	top: -11.5px;

	left: 12px;

	border-right: 0.5px solid #554f4f;

	border-top: 0.5px solid #554f4f;
	}

	.hair1:after {
	width: 20px;

	height: 12px;

	background: #eda435;

	position: absolute;

	content: " ";

	top: 0px;

	left: 45px;

	border-bottom: 0.5px solid #554f4f;
	}

	.hair2 {
	width: 22.5px;

	height: 44.5px;

	background: #ba7853;

	transform: skewY(-40deg);

	position: absolute;

	left: -23px;

	top: 74.5px;

	border-top: 0.5px solid #554f4f;

	border-left: 0.5px solid #f0b851f5;
	z-index: 3;
	}

	.hair2:before {
	width: 11px;

	height: 53px;

	background: #ba7853;

	position: absolute;

	content: " ";

	left: 5.5px;

	top: -10px;

	border-top: 0.5px solid #554f4f;
	}

	.hair2:after {
	width: 19.5px;

	height: 10px;

	background: #ba7853;

	content: " ";

	position: absolute;

	left: -5px;

	top: 34.5px;

	border-left: 0.5px solid #f0b851f5;
	}

	.eye {
	width: 30px;

	height: 15px;

	background: linear-gradient(to right, white 50%, #237528 50%);

	position: absolute;

	top: 50px;

	left: 15px;
	}

	.eye:before {
	width: 30px;

	height: 15px;

	background: linear-gradient(to left, white 50%, #237528 50%);

	position: absolute;

	content: " ";

	top: 0px;

	left: 50px;
	}

	.eye:after {
	width: 30px;

	height: 15px;

	background: #e4887b;

	position: absolute;

	content: " ";

	top: 35px;

	left: 25px;
	}

	/chest_start/

	.chest {
	width: 119px;

	height: 200px;

	background: linear-gradient(
	#94bb67 0px 140px,
	#244028 140px 160px,
	#94bb67 160px 200px
	);

	position: relative;

	top: 125px;

	left: -27px;

	border-left: 1px solid #aed581;
	z-index: 1;
	}

	.chest:after {
	position: absolute;

	content: " ";

	width: 19px;

	height: 200px;

	background: linear-gradient(
	#94bb67 0px 120px,
	#244028 120px 140px,
	#94bb67 140px 200px
	);

	left: -19px;

	transform: skewY(-40deg);

	top: 8px;
	}

	.chest:before {
	width: 121px;

	height: 15px;

	position: absolute;

	content: " ";

	background: #794843;

	top: 200px;

	transform: skewX(-50deg);

	left: -10px;
	}

	.bat {
	transform: rotateZ(-2deg) rotateX(-5deg);

	position: absolute;

	top: 0px;
	z-index: 3;
	}

	.c1 {
	width: 15px;

	height: 30px;

	position: absolute;

	background: #74662d;

	left: 15px;
	}

	.c1:before {
	width: 15px;

	height: 15px;

	position: absolute;

	content: " ";

	background: #74662d;

	left: 15px;

	top: 30px;

	z-index: 5;
	}

	.c1:after {
	width: 30px;

	height: 15px;

	position: absolute;

	content: " ";

	background: #74662d;

	left: 30px;

	top: 45px;
	}

	.c2 {
	width: 30px;

	height: 39.5px;

	position: absolute;

	background: #e59831;

	left: 89px;

	z-index: 1;
	border-left: 0px solid #ad6f0c;
	border-bottom: 0.5px solid #ad6f0c;
	}

	.c2:before {
	width: 39.5px;

	height: 15px;

	position: absolute;

	content: " ";

	background: #e59831;

	left: -10px;
	border-left: 0.5px solid #ad6f0c;
	}

	.c2:after {
	width: 20px;

	height: 24.5px;

	position: absolute;

	content: " ";

	background: #e59831;

	top: 25px;

	left: -10px;
	border-bottom: 0.5px solid #ad6f0c;
	}

	.c3 {
	width: 49px;

	height: 45px;

	background: #fdde80;

	position: absolute;

	left: 30px;

	z-index: 4;
	}

	.c3:before {
	position: absolute;

	content: " ";

	width: 12.5px;

	height: 47.5px;

	background: #e59831;
	left: 45px;
	top: 25px;
	border-left: 0.5px solid #ad6f0c;
	border-bottom: 0.5px solid #ad6f0c;
	}

	.c3:after {
	width: 14.5px;
	height: 10px;
	background: #fdde80;
	position: absolute;
	content: " ";
	left: 45px;
	top: 15px;
	border-right: 0.5px solid #ad6f0c;
	}

	.c4 {
	width: 19.5px;
	height: 19.5px;
	background-color: #4b6835;
	position: absolute;
	top: 120px;
	border-top: 0.5px solid #ad6f0c;
	border-right: 0.5px solid #ad6f0c;
	}

	.c4:before {
	width: 20px;
	height: 20px;
	background-color: #4b6835;
	position: absolute;
	content: " ";
	left: 99px;
	border-top: 0.5px solid #ad6f0c;
	border-left: 0.5px solid #ad6f0c;
	}

	.c4:after {
	width: 90px;
	height: 15px;
	background: #6a301e;
	position: absolute;
	content: " ";
	top: 65px;
	left: 15px;
	}

	.hand1 {
	width: 50px;
	height: 50px;
	background: #b2d97d;
	position: absolute;
	left: -80px;
	transform: skewX(20deg) rotateZ(-10deg);
	top: 120px;
	z-index: 4;
	}

	.hand1:before {
	width: 50px;
	height: 100px;
	background: linear-gradient(
	#8cb160 0px 25px,
	#75622f 25px 35px,
	#f0bf8a 35px 100px
	);
	position: absolute;
	content: " ";
	left: -60px;
	transform: skewX(-50deg) rotateZ(0deg);
	top: 50px;
	}

	.hand1:after {
	width: 50px;
	height: 120px;
	background: linear-gradient(
	#5a823e 0px 30px,
	#393219 30px 40px,
	#b8764f 40px 100px
	);
	position: absolute;
	content: " ";
	left: -83px;
	transform: skewY(-43deg) rotateZ(90deg) skewX(-5deg);
	top: 15px;
	}

	.hand2 {
	width: 50px;
	height: 150px;
	position: absolute;
	background: linear-gradient(
	#a2cb6d 0px 45px,
	#928244 45px 55px,
	#fee0b4 55px 150px
	);
	left: 120px;
	top: 110px;
	transform: skewX(20deg);
	}

	.hand2:before {
	width: 50px;
	height: 40px;
	background: #cd916b;
	position: absolute;
	content: " ";
	transform: skewX(-40deg);
	top: 150px;
	left: -17px;
	}

	.hand2:after {
	width: 33px;
	height: 150px;
	background: linear-gradient(
	#56813b 0px 45px,
	#372f1a 45px 55px,
	#ba7853 55px 150px
	);
	position: absolute;
	content: " ";
	transform: skewY(-47deg) rotateZ(-5deg) skewX(-5deg);
	left: -33px;
	top: 20px;
	}

	.leg1 {
	width: 60px;
	height: 170px;
	background: linear-gradient(
	#8a4126 0px 80px,
	#2a2b30 80px 90px,
	#745f59 90px 130px,
	#2a2b30 130px 140px,
	#745f59 140px 170px
	);
	position: relative;
	z-index: 11;
	top: 320px;
	left: -5px;
	transform: skewX(10deg);
	}
	.leg1:before {
	width: 60px;
	height: 30px;
	position: absolute;
	content: " ";
	background: #100d11;
	top: 170px;
	left: -9px;
	transform: skewX(-30deg);
	}

	.leg1:after {
	width: 17px;
	height: 170px;
	position: absolute;
	content: " ";
	background: linear-gradient(
	#5a833e 0px 10px,
	#3d1d16 10px 80px,
	#000000 80px 90px,
	#2a222a 90px 130px,
	#000000 130px 140px,
	#2a222a 140px 170px
	);
	transform: skewY(-60deg);
	left: -16.5px;
	top: 13px;
	}

	.leg2 {
	width: 60px;
	height: 105px;
	position: relative;
	background: linear-gradient(
	#3f1c17 0px 40px,
	#100a11 40px 50px,
	#2b242b 50px 80px,
	#100a11 80px 90px,
	#2b242b 90px 105px
	);
	top: 190px;
	left: 25px;
	z-index: 10;
	transform: skew(-20deg);
	}

	.leg2:before {
	width: 60px;
	height: 30px;
	position: absolute;
	top: -30px;
	left: -9px;
	background: linear-gradient(#3e1e17 0px 10px, #6b301c 10px 30px);
	content: " ";
	transform: skew(30deg);
	}