Making Cute CSS Skeleton

Cute CSS Skeleton

HTML:


	<html>
	<head>
	</head>
	<link href="https://fonts.googleapis.com/css2?family=Changa:wght@300&display=swap" rel="stylesheet">

	<body>
	<div class="all">
	<div class="hat"></div>
	<div class="head">
	<div class="eye1"></div>
	<div class="eye2"></div>
	</div>
	<div class="chest">
	<table>
	<tr>
	<td style="background:transparent;"></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	</table>
	</div>
	<div class="hand1"></div>
	<div class="hand2"></div>
	<div class="leg1"></div>
	<div class="leg2"></div>
	<a href="https://www.youtube.com/channel/UC3tqD0sEwyI7DGMUJzIcYIg">
	<div class="follow"><span>FOLLOW</span></div>
	</a>
	</div>
	</body>
	</html>

view raw skeleton.html hosted with ❤ by GitHub

CSS:

	body {
	background: #000000c6;
	}
	.hat {
	width: 20px;
	height: 20px;
	background: linear-gradient(red 0px 8px, white 8px 13px, red 13px 20px);
	border-radius: 50% 50% 0% 0%;
	position: relative;
	left: 60px;
	top: -1px;
	}
	.hat:before {
	position: absolute;
	content: "";
	width: 20px;
	height: 0px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid #b71c1c;
	top: 16px;
	left: -3px;
	}
	.hat:after {
	width: 20px;
	height: 16px;
	border-radius: 50% 50% 0% 0%;
	position: absolute;
	content: "";
	box-shadow: inset 5px 0px 3px white, inset 0px 0px 10px #222222;
	}

	.all {
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	}
	.head {
	width: 140px;
	height: 110px;
	background-color: silver;
	border-radius: 20%;
	}

	.head:before {
	width: 140px;
	height: 110px;
	position: absolute;
	content: "";
	border-radius: 20%;
	box-shadow: inset 5px 0px 3px white, inset 0px 0px 10px #222222;
	opacity: 0.8;
	}
	.eye1 {
	width: 35px;
	height: 35px;
	background-color: #222222;
	border-radius: 50%;
	position: relative;
	top: 47px;
	left: 25px;
	box-shadow: inset 0px 0px 0px 3px black;
	}
	.eye1:before {
	position: absolute;
	content: "";
	width: 15px;
	height: 7.5px;
	background: whitesmoke;
	border-radius: 15px 15px 0px 0px;
	top: 15px;
	left: 10px;
	box-shadow: 0px 0px 0px 3px black;
	}
	.eye2 {
	width: 35px;
	height: 35px;
	background-color: #222222;
	border-radius: 50%;
	float: right;
	position: relative;
	top: 10px;
	right: 25px;
	box-shadow: inset 0px 0px 0px 3px black;
	}
	.eye2:before {
	position: absolute;
	content: "";
	width: 15px;
	height: 7.5px;
	background: whitesmoke;
	border-radius: 15px 15px 0px 0px;
	top: 15px;
	left: 10px;
	box-shadow: 0px 0px 0px 3px black;
	}

	.chest {
	width: 80px;
	height: 70px;
	background: silver;
	border-radius: 35%;
	position: relative;
	left: 28px;
	z-index: 2;
	}
	.chest:before {
	position: absolute;
	content: " ";
	width: 80px;
	height: 70px;
	box-shadow: inset 5px 0px 3px white, inset 0px 0px 10px #222222;
	border-radius: 35%;
	opacity: 0.8;
	}
	table {
	position: relative;
	top: 20px;
	left: 15px;
	}
	td {
	background: lightblue;
	width: 8px;
	height: 8px;
	}
	.hand1 {
	width: 0px;
	height: 8px;
	position: absolute;
	top: 140px;
	left: -35px;
	z-index: 1;
	border-left: 70px solid silver;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: rotateZ(20deg);
	transform-origin: right;
	}
	.hand1:before {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: silver;
	position: absolute;
	content: "";
	left: -80px;
	top: -9px;
	box-shadow: inset 0px 3px 5px white;
	}

	.hand1:after {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: silver;
	left: -65px;
	border-radius: 10px 4px 4px 10px;
	top: -5px;
	box-shadow: inset 0px 2px white, inset 1px -1px 1px white;
	}

	.hand2 {
	width: 0px;
	height: 8px;
	position: absolute;
	top: 140px;
	left: 95px;
	z-index: 1;
	border-right: 70px solid silver;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: rotateZ(20deg);
	transform-origin: left;
	}
	.hand2:before {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: silver;
	position: absolute;
	content: "";
	left: 60px;
	top: -9px;
	box-shadow: inset 0px 3px 5px white;
	}

	.hand2:after {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: silver;
	left: 65px;
	border-radius: 4px 10px 10px 4px;
	top: -5px;
	box-shadow: inset 0px 2px white, inset 1px -1px 1px white;
	}

	.leg1 {
	width: 8px;
	height: 0px;
	position: absolute;
	top: 190px;
	left: 40px;
	border-right: 4px solid transparent;
	border-bottom: 70px solid silver;
	border-left: 4px solid transparent;
	transform: rotateZ(0deg);
	transform-origin: left;
	}
	.leg1:before {
	position: absolute;
	content: "";
	width: 30px;
	height: 15px;
	border-radius: 20px 20px 0px 0px;
	left: -10px;
	top: 55px;
	background: silver;
	transform: rotateZ(0deg);
	transform-origin: left;
	}
	.leg1:after {
	position: absolute;
	content: "";
	width: 30px;
	height: 15px;
	border-radius: 20px 20px 0px 0px;
	left: -10px;
	top: 55px;
	box-shadow: inset 0px -3px 5px white, inset 3px 0px 5px white;
	transform: rotateZ(0deg);
	transform-origin: left;
	}

	.leg2 {
	width: 8px;
	height: 0px;
	position: absolute;
	top: 190px;
	left: 80px;
	border-right: 4px solid transparent;
	border-bottom: 70px solid silver;
	border-left: 4px solid transparent;
	transform: rotateZ(0deg);
	transform-origin: left;
	}
	.leg2:before {
	position: absolute;
	content: "";
	width: 30px;
	height: 15px;
	border-radius: 20px 20px 0px 0px;
	left: -10px;
	top: 55px;
	background: silver;
	transform: rotateZ(0deg);
	transform-origin: left;
	}
	.leg2:after {
	position: absolute;
	content: "";
	width: 30px;
	height: 15px;
	border-radius: 20px 20px 0px 0px;
	left: -10px;
	top: 55px;
	box-shadow: inset 0px -3px 5px white, inset 3px 0px 5px white;
	transform: rotateZ(0deg);
	transform-origin: left;
	}
	.head:after {
	position: absolute;
	content: " ";
	width: 130px;
	height: 40px;
	background: silver;
	border-radius: 50%;
	top: 240px;
	left: 5px;
	opacity: 0.5;
	}
	.follow {
	position: relative;
	width: 150px;
	height: 60px;
	background: white;
	top: 100px;
	left: -15px;
	border: 10px solid white;
	text-align: center;
	box-shadow: inset 0px 0px 8px black;
	z-index: 4;
	}
	.follow:before {
	position: absolute;
	content: "";
	width: 150px;
	height: 60px;
	background: -webkit-linear-gradient(
	-60deg,
	skyblue 0px 20px,
	white 20px 40px,
	skyblue 40px 65px,
	white 65px 80px,
	skyblue 80px 100px
	);
	left: 0px;
	opacity: 0.7;
	}
	span {
	position: relative;
	font-weight: bolder;
	font-size: 2em;
	font-family: "Changa", sans-serif;
	color: black;
	}
	a {
	text-decoration: none;
	}